過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<p>Vue.jsは<span style="color:#e74c3c"><strong>v-bind</strong></span>を利用することでjavascriptのdataをhtml内で利用することが出来る。</p>

<p>中括弧を用いることでもデータ連携は可能であるが、一部v-bindでしか利用できない場面がある。&nbsp;中括弧の例:&nbsp;{{ data1 }}</p>

<p>※v-bindでなければいけない場面はコンパイル時に明確に指摘されるのでそれを参考に</p>

<p>以下、トレンドワードをAPIで取得して、その検索結果画面(Google)リンクを表示させる実践的なサンプル。</p>

<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
	<tbody>
		<tr>
			<td style="background-color:#000000">
			<p><span style="color:#ffffff"><template><br />
			&nbsp; &nbsp; <div><br />
			&nbsp; &nbsp; &nbsp; &nbsp; <ul><br />
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li v-for="</span><span style="color:#66ffff">trendWord </span><span style="color:#ffffff">in </span><span style="color:#2ecc71">trendWords</span><span style="color:#ffffff">"><br />
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a </span><strong><span style="color:#f1c40f">v-bind</span></strong><span style="color:#ffffff">:href="</span><span style="color:#e74c3c">searchUrl </span><span style="color:#ffffff">+ encodeURI(</span><span style="color:#66ffff">trendWord</span><span style="color:#ffffff">)">search</a><br />
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li><br />
			&nbsp; &nbsp; &nbsp; &nbsp; </ul><br />
			&nbsp; &nbsp; </div><br />
			</template></span></p>

			<p><span style="color:#ffffff"><script></span></p>

			<p><span style="color:#ffffff">&nbsp; &nbsp; export default {<br />
			&nbsp; &nbsp; &nbsp; &nbsp; created() {<br />
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.</span><span style="color:#9b59b6">getTrendWords</span><span style="color:#ffffff">()<br />
			&nbsp; &nbsp; &nbsp; &nbsp; },<br />
			&nbsp; &nbsp; &nbsp; &nbsp; data() {<br />
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {<br />
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color:#2ecc71">trendWords</span><span style="color:#ffffff">: [],<br />
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color:#e74c3c">searchUrl</span><span style="color:#ffffff">: "https://www.google.com/search?q=",<br />
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br />
			&nbsp; &nbsp; &nbsp; &nbsp; },<br />
			&nbsp; &nbsp; &nbsp; &nbsp; methods: {<br />
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color:#9b59b6">getTrendWords</span><span style="color:#ffffff">() {<br />
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; axios<br />
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .get('/api/trend-word/list') //架空のURL<br />
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(res => &nbsp;{<br />
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.</span><span style="color:#2ecc71">trendWords </span><span style="color:#ffffff">= res.data<br />
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })<br />
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br />
			&nbsp; &nbsp; &nbsp; &nbsp; }<br />
			&nbsp; &nbsp; }<br />
			</script></span><br />
			&nbsp;</p>
			</td>
		</tr>
	</tbody>
</table>

<p>&nbsp;</p>