Vue MasteryのIntro to Vue 2をやってみる~Lesson 2~
はじめに
ご覧いただきありがとうございます。mocです。
前回はVue MasteryのIntro to Vue2のLesson1をやってみました！
前回執筆にかなりの時間を要してしまったので、ちょっとやり方変えてます。
- 動画見て手を動かす。
- 動画の下にテキストベースの説明（存在に気づいてなかった。）を読む。
- 動画のコードを試すのに必要だった事前準備と、2の意訳をまとめる。
記事本文の構成としては、こうなる予定です。
- 事前準備（動画内で説明がない部分）
- テキストベースの説明箇所の意訳
かなりわかりやすい動画なので、英語が苦手な方のお役に立てば何よりです。
それでは、やっていきます。
事前準備
今回、あらかじめ必要となるファイルは、下記のものになります。
- index.html
- main.js ← lesson1をやっている方は変更不要
- style.css
- vmSocks-green.jpg
- vmSocks-blue.jpg
いっぱいありますね、ひとつずつみていきましょう。
index.html
lesson 1 からいくつかdivタグが追加されているようです。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product App</title>
</head>
<body>
+ <div class="nav-bar"></div>
<div id="app">
+ <div class="product">
<h1>{{ product }}</h1>
+ </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script>
<script src="main.js"></script>
</body>
</html>
main.js
lesson 1からの変更点はありません。
var app = new Vue({
el: '#app',
data: {
product: 'Socks',
image: './assets/vmSocks-blue.jpg'
}
})
style.css
lesson2で初登場のファイルです。
.nav-bar {
background: #58db74;
height: 50px;
}
.product {
margin-top: 40Px;
}
.product-image {
float: left;
width: 50%;
}
.product-image img {
width: 80%;
}
.product-info {
float: right;
width: 50%;
}
vmSocks-green.jpg、vmSocks-blue.jpg
配置の準備
動画内で、画像ファイルはassetsというディレクトリを参照しています。
なので、配置用のディレクトリを作成します。
$ ls
index.html main.js style.css
$ mkdir assets
画像の取得
公式ページ の中から画像を取得します。
画像にカーソルを合わせて、右クリックで保存します。
保存先は先ほど作ったassetsディレクトリ配下。
これで準備完了！
テキスト意訳
今回は、Attribute Binding（属性バインディング）です。
これも基礎の基礎だけど、私のような初学者にとっては、理解に苦しんだところでした。
それでは、やっていきます。
（独自に補足入れたりしています。）
Attribute Binding(属性バインディング)
このレッスンでは、HTML要素の属性とデータを紐付ける方法を解説します。
今回の目的
Vueインスタンスのデータを元に、画像を表示したり、altテキストを設定したりするために、attribute-binding（属性バインディング）を利用します。
復習
Vueインスタンスのデータとは、main.jsでVueのインスタンスを作成した際に引数に設定したオブジェクトの中のdataの部分を指します。
lesson2の最初の時点のコードでは、productがそれにあたります。
var app = new Vue({
el: '#app',
data: {
product: 'Socks'
}
コーディングスタート
index.htmlとmain.jsを編集します。
index.htmlの編集
productの画像とproductの情報を表示するためのdivタグを作成します。
<div id="app">
<div class="product">
+ <div class="product-image">
+ <img src="" />
+ </div>
+ <div class="product-info">
<h1>{{ product }}</h1>
+ </div>
</div>
</div>
main.jsの編集
Vueインスタンスのデータにimageを追加します。
var app = new Vue({
el: '#app',
data: {
product: 'Socks',
+ image: './assets/vmSocks-green.jpg'
}
})
課題
画像をページ上に動的に表示させたい。
動的にとは、Vueインスタンスのデータを更新したら、ページ上の画像も自動的に更新されることを指します。
imgタグのsrc属性に画像へのパスを指定すると、その画像を表示することができます。
なので、src属性に設定する値と、Vueインスタンスに設定するデータ（今回だとimage）を紐付け紐づけてあげることで、画像を動的に表示させます。
今回のポイント：Data Binding（データバインディング）
Vueにおけるデータバインディングとは、テンプレート（index.html）で表示したい箇所と、Vueインスタンスのデータオブジェクトのデータが紐づいている状態のことを指します。
解決方法
Vueインスタンスのデータオブジェクトのimageの値と、imgタグのsrc属性の値を紐づけるために、Vueの v-bindディレクティブを使います。
index.htmlを下記のように編集します。
（関連箇所の前後のみ表示しています。）
<div id="app">
<div class="product">
<div class="product-image">
- <img src="" />
+ <img v-bind:src="image" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
一度ブラウザで表示してみます。
次に、main.jsを下記のように編集します。
var app = new Vue({
el: '#app',
data: {
product: 'Socks',
- image: './assets/vmSocks-green.jpg'
+ image: './assets/vmSocks-blue.jpg'
}
})
そして、ブラウザを再読み込みします。
画像が変わりましたね！
もっと使ってみよう！
今度は、imgタグのaltテキストもv-bindを利用して設定してみます。
index.htmlとmain.jsを下記のように編集します。
<div id="app">
<div class="product">
<div class="product-image">
- <img v-bind:src="image" />
+ <img v-bind:src="image" v-bind:alt="altText" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
var app = new Vue({
el: '#app',
data: {
product: 'Socks',
- image: './assets/vmSocks-blue.jpg'
+ image: './assets/vmSocks-blue.jpg',
+ altText: "A pair of socks"
}
})
確認してみましょう！
画面を再読み込みして、画像の上で右クリックをします。
表示されるメニューから「検証」を選択してみましょう。
すると、chromeの開発者ツールが開くので、そこでalt属性が設定されていることを確認できます。
v-bindディレクティブは、Vueでよく使うものなので、記載を短縮することができます。
ただ、コロン（:）をつけるだけでよいのです。
なので、先ほど書いたコードは下記のように置き換えることができます。
- <img v-bind:src="image" v-bind:alt="altText" />
+ <img :src="image" :alt="altText" />
シンプルで、スッキリして、扱いやすくなりましたね！
まとめ
今回は、lesson2をやってみました。
v-bind、便利ですね。
しかも、属性にコロンつけるだけでいいなんて、、、！
ちょっとずつできる、わかることが増えていくのは楽しいですね。
次回はlesson3をやっていく予定です。
お疲れ様でした！
Discussion