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/02/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:」のような指示キーワードを「ディレクティブ」と呼びます。
v-bindディレクティブのおさらい
今回登場したv-bindディレクティブは、Vueでは非常によく使う重要な機能です。もう一度おさらいしておきましょう。
覚えておくべきポイントは、「HTML属性にv-bindディレクティブを付けると、Vue側で指定するデータとバインディングできる」ということです。
例えば、以下のHTMLコードのように「v-bind:src」という具合に、img要素のsrc属性の前にv-bindディレクティブを付けたとします。
<img v-bind:src="itemImage" />
すると、img要素のsrc属性の値とVueインスタンスのdataプロパティで指定するデータとがバインディングされます。今回のサンプルの場合、上記のように記述したHTMLソースは、Vueでは以下のように評価されます。
<img src="./images/socks-pink.png" />
HTML属性内に画像ファイルへのパスなどのデータを属性値としてベタ打ちすると、静的に表示されるウェブページとなります。一方、 v-bindディレクティブを使ってデータをバインディングすると、表示内容をVue側で動的に操作できるようになります。
次回へ続きます。