今回はVue.jsのテンプレート機能について紹介します。
Vue.jsでは v-*** というカスタム属性を用いてテンプレート機能を表現します。
Notice
記事中のCodePenは右上の "Edit on CodePen" からコード編集画面に遷移できます。
ぜひ手元でコードを変えて結果を確かめてみてください。理解が早まると思います。
前提
| マシーン | ブラウザ | Vue |
|---|---|---|
| macOS Sierra 10.12 | Firefox Quantum | ver. 2.5 |
条件分岐
条件分岐には2パターンあって、v-if と v-show で表現されます。
v-if / v-else-if / v-else
See the Pen Vue.js v-if by Masahiro Harada (@MasahiroHarada) on CodePen.
属性 v-if の値に条件式を記載します。上記CodePenで言うと v-if="messages.count > 0" の部分です。条件式が真（true）と判断された場合、その v-if が書かれた要素がDOMに現れます。逆に条件式が偽（false）と判断された場合は、要素がDOMから削除されます。
v-else-if と v-else も同様に機能します。CodePenの count: 3 の部分を count: 0 に書き換えてみてください。青い通知が消え、"No messages." が表示されるはずです。
データを書き換えると自動的に条件式が再評価され、DOMが書き換わる点に注目してください。これが Vue.js フレームワークの機能でありパワー（のひとつ）なのです。jQuery だと自分でDOMを書き換えないといけませんが、Vue が裏側で仕事をしてくれるわけです。
注意が必要な点は、if に限らず v-***="〜" の引用符の中はJavaScriptとして評価されるということです。
See the Pen Vue.js v-if 2 by Masahiro Harada (@MasahiroHarada) on CodePen.
上掲のCodePenでは、条件式を v-if="user.gender === 'male'" と書いています。条件式の中で文字列を表現する場合は、'male' というふうに引用符で囲ってあげないといけません。これを忘れると条件式は下記のJavaScriptとして認識されるので、未定義の変数 male を参照することになってしまいます。
user.gender === male引用符の中に引用符を記載するのは初めのうちは少し分かりづらいかもしれません。注意しましょう。
v-show
See the Pen Vue.js v-show by Masahiro Harada (@MasahiroHarada) on CodePen.
v-show も v-if と同様に動作します。条件式が真（true）と判断された場合、その v-show が書かれた要素が表示されます。逆に条件式が偽（false）と判断された場合は、要素が（CSSにより）非表示となります。
掲載したCodePenはタブもどきです。イベントハンドリングはまだ紹介していないので、ボタン部分はハリボテで動きません 
JavaScriptの currentTab: 1 の箇所を 2 や 3 に書き換えてみてください。タブが切り替わります。
v-if と v-show の違い
ブラウザの画面上では v-if も v-show も表示・非表示が切り替わります。そういう意味では両者同じなのですが、DOM上での表現に違いがあります。
以下の画像はそれぞれ、上に掲載したCodePenの内容を開発者ツールで閲覧したものです。
v-if
v-show
v-if では偽と判定された要素はDOMから削除されています。
一方、v-show では偽と判定された要素は display: none; となっています。あくまでCSSによって非表示となっているという点で v-if とは異なっていますね。
以上が機能としての違いです。
次に「使い分け」ですが、フレームワーク的にはもちろん決まりはありません。個人的にはHTML文書としてどちらが適切かによって使い分けています。
ある条件のもとでだけHTML文書に含まれているべき要素には v-if を使っています。例えばエラーメッセージや通知がそれにあたるでしょう。意味的に言って、エラーがない場合はエラーメッセージは単に隠れているのではなく文書に存在すべきではありません。
逆に常に文書には含まれているべきで、表示・非表示はデザイン上の判断である場合は v-show を使います。例えばタブやアコーディオンのコンテンツ部分です。
マニュアル
より詳しくはこちらを参照してください。 条件付きレンダリング — Vue.js
繰り返し
v-for
See the Pen Vue.js v-for by Masahiro Harada (@MasahiroHarada) on CodePen.
要素の繰り返しは v-for="配列の一要素 in 配列データ" という記述で表現します。
注意点としては、繰り返される要素は v-for が記載された要素（およびその子要素）である点でしょうか。プログラミング言語の感覚でいくと繰り返されるのは for の中身かもしれませんが、v-for ではそうなりません。上掲のCodePenで言うと <tr> が繰り返されるわけです。
マニュアル
より詳しくはこちらを参照してください。 リストレンダリング — Vue.js
HTMLの属性にデータを埋め込む
本記事の最後に、カスタム属性（v-***）ではなくHTMLの属性にデータを埋め込む方法を紹介します。
See the Pen Vue.js HTML attribute by Masahiro Harada (@MasahiroHarada) on CodePen.
:src="〜" のように、属性名の頭にコロンを付与すると、引用符の内部がJavaScriptとして評価されるようになります。
<img :src="`https://media.giphy.com/media/${gifId}/giphy.gif`" />上の例ではバッククォートを用いてデータ gifId と文字列を結合しています。
href や value などHTMLの属性には基本的にこの方法を利用できます。ただ、class と style には他の方法が用意されていますので、また別記事で紹介します。
ここでの注意点は、href="{{ url }}" のようには書かないということです。HTML属性へのデータの埋め込みにはコロン記法を用いてください。
以上、Vue.jsのテンプレート機能について紹介しました。
