この記事はUdemyの講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」の学習を進めながら書いた記事になります。Vue.jsに関する記事の一覧はこちらからご覧いただけます。
今回は、前回触ってみたv-bind以外のディレクティブを触ってみます。また、コンポーネントの基本についても触れてみます。新しいことがたくさん出てきますね。講座の内容を確認しながら並行して公式リファレンスも確認していくと学習しやすいですよ。
Vue.js以外にも基本的なWebスキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。
条件分岐 v-if
条件分岐 v-if は、要素の表示／非表示を切り替えることができます。
例題として、p要素を配置して、表示切り替えをしてみる、ということをやってみます。
HTML側にターゲットとなる要素pを作ります。pタグにディレクティブ v-if を設定し、値にはtoggleを指定しておきます。
<div id="app">
<p v-if="toggle">Hello</p>
</div>この時点では、jsFiddle右下の実行結果表示欄にはHelloと表示されているはずです。
次にJavaScript側で表示／非表示を切り替えるために必要なプロパティを用意します。
var app = new Vue({
el: '#app',
data: {
toggle: false
}
})今回はtoggleという名前で用意しています。値は初期値としてfalseを設定してあります。jsFiddleでコードを打っていくと、toggle: falseを書いたら（正確にはjsFiddle設定でauto-run codeがonになっている必要があります）結果を表示する右下エリアにHTMLでpタグを設定したときには表示されていたHelloが消えていることが確認できるはずです。
これは、dataプロパティに設定してあるtoggleの値がfalseのため、pタグで設置してあるv-if="toggle"がfalseということになり、このp要素が表示されないということになります。
toggleの値をtrueに変更してみると、Helloが表示されることが確認できるはずです。
また、DOMレベルの話ですが、この場合pタグ自体が削除されます。ですので、頻繁に表示／非表示を繰り返す場合、描画コストが高くなる可能性があるため、その場合にはdisplay要素を切り替えて表示／非表示をさせるv-showを利用すると良いとのこと。
条件分岐 v-show
v-showディレクティブは、要素の表示／非表示を切り替える点においてはv-ifと同じですが、CSSのdisplayプロパティをON/OFFして切り替えます。
コードは先ほどのものをv-showに変更したものになります。
<div id="app">
<p v-show="toggle">Hello</p>
</div>こちらで確認していきます。JavaScript側は同じです。
JavaScript側でtoggle: trueにして、デベロッパーツールで確認してみると、
このように、p要素に対してインライン形式でdisplay: none;が記述されていることがわかります。v-ifのようにDOMレベルで削除するということではなく、CSSレベルで表示／非表示を切り替えるのがv-showということになります。
繰り返しの描画 v-for
例題として、dataオプションに登録した配列の値（Red、Green、Blue）を番号付きのリストで表示させるというものを作ります。
v-for ディレクティブの構文
<要素名 v-for="バリューinオブジェクト">
{{ 表示したいバリュー }}
</要素名>または
<要素名 v-for="（キー、バリュー）inオブジェクト">
{{ 表示したいキー or バリュー }}
</要素名>表示に使うデータを用意
まずは、表示に使うデータを用意します。
var app = new Vue({
el: '#app',
data: {
colors: ['Red', 'Green', 'Blue']
}
})表示部分を用意
テンプレートの方で、配列に格納されているアイテムをv-forディレクティブで繰り返し処理を行いながら１つずつ取り出して表示させます。
<div id="app">
<ol>
<li v-for="color in colors">{{ color }}</li>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>v-for="color in colors"と書いてありますが、colors（（複数形）は配列を指し、color（単数）はエイリアスを指します。名称は任意でつけられますが、わかりやすいように配列には複数形を使うようにすると良いとのこと。
オブジェクトの繰り返し v-for
次は配列ではなく、オブジェクトからデータを抜き出して繰り返し表示させる方法を勉強します。
様々な属性、プロパティを持ったもの
表示に使うデータを用意
var app = new Vue({
el: '#app',
data: {
user: {
firstName: 'Taro',
lastName: 'Yamada',
age: '28'
}
}
})
このように、オブジェクトでfirstName、lastName、ageのデータを設定します。
表示部分を用意
<div id="app">
<ul>
<li v-for="value in user">{{ value }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>userの中にある値を順にvalueに入れて、<li>〜〜</li>の中に繰り返し表示させています。
キー名も表示してみる
firstNameといったキー名も表示させることができます。
<div id="app">
<ul>
<li v-for="value in user">{{ value }}</li>
</ul>
<hr>
<ul>
<li v-for="(value, key) in user">
{{ key }} : {{ value }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>このように、v-for="(value, key) in user"と記述することによって、キー名も引っ張り出してくることができます。
第一引数がvalueで、第二引数がkeyとなりますので気をつけましょう。
そして、表示部分では、キー名を表示したい場合には{{ key }}と、値を表示させるには先ほどと同じように{{ value }}と記述します。そうすることで、
このような結果を確認することができます。
イベント処理の基本 v-on
例題として、ボタンをクリックしたら現在時刻をページに表示させる。というものを作ってみます。
テンプレート側の設定
テンプレート側（HTML側）ではこのように記述しました。
<div id="app">
<button v-on:click="onclick">Click!</button>
<p>
{{ now }}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>v-onに:clickを付けることで、「クリックされたら」という設定にすることができます。そして、「クリックされたら」onclickイベントハンドラを実行するという記述になります。
次に、現在時刻を表示する部分ですが、ボタンの下にpタグでマスタッシュ構文で{{ now }}と記述しておきます。onclick、{{ now }}ともにJavaScriptの方であとで設定します。
Vueインスタンス側を実装
まずはここまで記述してみます。
var app = new Vue({
el: '#app',
data: {
now: ''
},
methods: {
onclick: function() {
alert('onclick!');
}
}
})まず、現在時刻を入れるnowを設定します。中身は空になっています。
次にmethods部分にクリックした時に動かすoncluckを設定していきます。上ではまずテストとして、アラートが出るかどうかで動作を確認しています。
現在時刻を表示させる処理
nowに現在時刻を入れたいので、this.nowにnew Date().toLocaleString()とします。
var app = new Vue({
el: '#app',
data: {
now: ''
},
methods: {
onclick: function() {
// alert('onclick!');
this.now = new Date().toLocaleString();
}
}
})実際に動作させると、こんな感じになります。
双方向データバインディング v-model
双方向データバインディングとは
dataオブジェクトの値を変更←→テンプレートの値の変更 を同時に行うということ。
Vueインスタンス側から設定する
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})最初に表示するデータを用意しておきます。
テンプレート側を設定する
<div id="app">
<p>
<input type="text" v-model="message">
</p>
<p>
<input type="text" v-model="message">
</p>
<pre>{{ $data }}</pre>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>inputを用意してv-modelを設定します。変数はインスタンスで設定したmessageです。そして、そのinput部分を複製して、実際に双方向データバインディングができているか視覚的に確認できるようにしておきましょう。
デバッグ用に{{ $data }}という記述を<pre>タグの中にしておきます。そうすることで、messageデータの動きをリアルタイムで視覚的に確認することができます。
実際の動作
実際の動作はこのような形になります。データバインディングの流れとしては、一番上のフォームの値を変更した場合、
- 一番上のフォームに入力すると
- データ
messageが書き換えられて - 上から二番目のフォームの内容が変更される
という流れになります。
コンポーネント
コンポーネントとは？
- ページを構成するUI部品
- テンプレートとそのロジックから構成
- よく使う機能をコンポーネント化
- 再利用性が高くなる
- コードの見通しがよくなる
例題
- Hello! と表示するUIパーツを作成
- ページ内で使い回しできるようにしたい
Vue.component( コンポーネントの名前, コンポーネントの定義情報 )
コンポーネントを作成する
Vue.component( 'hello-component', {
temlate: '<p>Hello</p>'
})
var app = new Vue({
el: '#app'
})今までとは違い、var app =・・・部分に記述する形ではなく、その前にコンポーネントは宣言するようですね。
テンプレート側で表示させる
<div id="app">
<hello-component></hello-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>先ほど作ったコンポーネントをタグのように使って表示させるんですね。なるほど。
これを複製すると、複製した数だけコンポーネントを作ることができます。
Vue.js以外にも基本的なWebスキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。
まとめ
ディレクティブをざっと触ってみて、できることがとても増えましたね。まだまだ基本中の基本ですが、Vue.jsなかなか楽しいですね！
