Vue入門2 v-bind: を使ったデータバインディング

Vue入門の第2回（第1回はこちら）です。今回は、Vueの「v-bind:」を使ったデータバインディングについて学びます。

index.htmlを書き換える

前回作成したHTMLファイル index.html を以下のように書き換えます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vueサンプル</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
	<div class="item">

		<div class="item-image">
		    <img src="【ここに画像を動的に表示したい】" />
		</div>

		<div class="item-info">
		    <h2>{{ itemName }}</h2>
		</div>

	</div>
</div>
<script src="main.js"></script>
</body>
</html>

このindex.htmlの書き換えでは、<div>タグで囲んで商品画像を表示する部分と商品情報テキストを表示する部分を分けています。そのほうが後からレイアウト調整などがしやすくなるからです。

main.jsを書き換える

次に、前回作成したJSファイル main.js を以下のように書き換えます。

var app = new Vue({
    el: '#app',
    data: {
        itemName: 'キッズ靴下',
        itemImage: './images/socks-pink.png'
    }
})

ここまでで、index.htmlとmain.jsを書き換えましたが、この時点ではまだ index.html 内のimg要素と、main.jsでパスを指定している画像ファイルsocks-pink.pngとは結び付いていません。

v-bind:を使ってデータを結びつける

画像を動的に表示するために、index.htmlの画像表示の部分をVueの「v-bind:」を使った書式に書き換えます。

<img src="【ここに画像を動的に表示したい】" />

↓以下のように書き換える

<img v-bind:src="itemImage" />

HTMLソースを上記のように書き換えることで、index.htmlに記述した”itemImage”と、main.jsに記述した以下のitemImage: の部分とが結び付けられます。

itemImage: './images/socks-pink.png'

表示を確認してみる

ここまで出来たら、 index.htmlとmain.jsを上書き保存して表示を確認してみましょう。尚、同じ階層にimagesフォルダを作成してsocks-pink.pngという名前の画像ファイルを用意しています。

以下は、ここまでに作成したサンプルページです。

https://programming-world.net/sample/vue_sample/0 2 /index.html

画面にピンクの靴下画像が表示されて、その下に「キッズ靴下」と表示されていれば成功です。

HTMLとVueを結びつけるデータバインディング

<img v-bind:src=”itemImage” />と書き換えたことで何が起きたのか確認していきましょう。

現在の index.html は、以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vueサンプル</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
	<div class="item">

		<div class="item-image">
		    <img v-bind:src="itemImage" />
		</div>

		<div class="item-info">
		    <h2>{{ itemName }}</h2>
		</div>

	</div>
</div>
<script src="main.js"></script>
</body>
</html>

上記のindex.htmlのなかの <img v-bind:src=”itemImage” /> の部分では、img要素のsrc属性の前に「v-bind:」というVue特有のキーワードが付けられています。

現在の main.js は、以下の通りです。

var app = new Vue({
    el: '#app',
    data: {
        itemName: 'キッズ靴下',
        itemImage: './images/socks-pink.png'
    }
})

index.htmlでは、 <img v-bind:src=”itemImage” /> の部分で “itemImage” という属性値が指定されています。この属性値 “itemImage” は「v-bind:」と付けることにより、main.jsのitemImage: ‘./images/socks-pink.png’と結び付けられます。

HTML側では属性に「v-bind:」と付けることで、Vueに対してデータバインディング命令を利用することを伝えます。Vue側ではバインディングするデータをVueインスタンスのdataプロパティ内に記述します。

英単語のbindは「縛る・結びつける」という意味ですが、 Vueでは上記例のようにデータを結びつけることを「データバインディング」と呼びます。また、英単語のdirectiveは「指示・命令」という意味ですが、Vueでは今回登場した「v-bind:」のような指示キーワードを「ディレクティブ」と呼びます。