【Vue.js入門】09_さまざまなテンプレート構文に触れる

Vue.js入門第9回。さまざまなテンプレート構文に触れてみます。

はじめに

今回はVue.jsのさまざまなテンプレート構文、ディレクティブを触ってみたいと思います。

v-onceディレクティブ

v-onceディレクティブは初回の１回目のみデータバインディングを行い、以降は静的コンテンツとして扱われます。

ボタンが押されたら文字列を反転して表示するサンプルで動作確認してみます。

ソースコード

解説

HTMLにmessageプロパティの値を表示するpタグと、クリックされたらmessageプロパティの値を反転するclickHandlerメソッドを作成しています。

pタグの２つ目にはv-onceディレクティブを指定しており、ボタンがクリックされても反転しない（２回目以降はデータバインディングされない）ことが確認できます。

v-preディレクティブ

v-preディレクティブは要素とコンパイルをスキップさせたい時に使います。

以下のような場合に用います。

• マスタッシュタグを表示したい時
• サニタイズすることによるXSS対策

ソースコード

解説

簡単にですが、v-preディレクティブを指定した２つ目のpタグはデータバインディングされずにそのまま表示されています。

v-htmlディレクティブ

v-htmlディレクティブはHTMLをそのまま出力することが出来ます。innerHTMLと同じです。

サーバーサイドから取得した生のHTMLを表示したい場合に用います。なお、XSS脆弱性に繋がるので極力使用しないような設計が望ましいです。

ソースコード

解説

v-htmlディレクティブを指定することにより、２つ目のpタグはStyle属性が適用され赤文字で表示されていることが確認できます。

v-cloakディレクティブ

v-cloakディレクティブはページ生成中にマスタッシュタグなどのコンパイルされる前のテンプレートが表示されるのを防ぐ際に用います。

具体的には低速回線などであるチラツキ防止のために使います。

ソースコード

解説

v-cloakディレクティブを指定し、CSSのdisplay:noneでv-cloak属性が付与されている要素を非表示にしています。

v-cloakディレクティブはロード完了時に外れるディレクティブで、ロード中は非表示、ロード完了後は要素の内容を表示するといった制御が出来ます。

v-textディレクティブ

v-textディレクティブはマスタッシュ構文のディレクティブ版で、pタグなどval属性がないタグでマスタッシュ構文を使わずにデータバインディングすることが出来ます。

ソースコード

解説

マスタッシュ構文とv-textディレクティブそれぞれでmessageプロパティの中身を表示しています。

どちらも結果は同じですがマスタッシュ構文ではテキストの一部を置き換えることが出来るのに対し、v-textディレクティブでは要素をまるごと置き換えることしか出来ません。

マスタッシュ構文では3つ目のpタグのように一部を置き換えるということが可能です。

v-cloakディレクティブ

v-cloakディレクティブはページ生成中にマスタッシュタグなどのコンパイルされる前のテンプレートが表示されるのを防ぐ際に用います。

具体的には低速回線などであるチラツキ防止のために使います。

ソースコード

解説

v-cloakディレクティブを指定し、CSSのdisplay:noneでv-cloak属性が付与されている要素を非表示にしています。

v-cloakディレクティブはロード完了時に外れるディレクティブで、ロード中は非表示、ロード完了後は要素の内容を表示するといった制御が出来ます。

javascript式

マスタッシュ構文やv-bindディレクティブの中にはJavascript式を挿入することが出来ます。

ソースコード

解説

1つ目のpタグはmessageプロパティの値をそのまま出力していますが、２つ目はnumberプロパティ+1の値が出力されています。

このようにjavascriptの式としても評価されることがわかります。

同様に３つ目はjavascriptの関数を使ってmessageプロパティの文字列を反転表示し、4つ目のタグでは三項演算子を利用しています。