基礎からメモ： Vue.js CH2-p88 テンプレート制御ディレクティブ
テンプレートやコンパイル制御のためのディレクティブ
v-pre
<p><a v-bind:href="url" v-pre>Hello {{ message }}</a></p>
var app = new Vue({ el: '#app', data: { message: "Vue.js !", url: "https://www.google.co.jp/", } });
表示結果：レンダリングされずにMustacheはそのまま、app.urlデータも反映されない。
<p><a v-bind:href="url">Hello {{ message }}</a></p>
v-once
初回のみテンプレートを評価し、それ以降は静的コンテンツとして扱う。
<p><a v-bind:href="url" v-once>Hello {{ message }}</a></p>
次のようにデータを反映して表示されるが、その後リアクティブが解除される。
<p><a href="https://www.google.co.jp/">Hello Vue.js !</a></p>
v-onceを付けなかった場合と比較してみるとわかりやすい。
<p><a v-bind:href="url" v-once>Hello {{ message }}</a></p> <p><a v-bind:href="url">no v-once {{ message }}</a></p> <button v-on:click="changeMsg">Messageを変更</button>
app.messageを変更するボタンを設置し、データを変更するメソッドと紐付ける。
........ methods: { changeMsg() { this.message = "Change!" } } ........
ボタンを押すと 「v-once Vue.js !」は「no v-once Change!」に変わるが、v-onceの付いたDOMは変化しない。
v-text
Mustacheを使わずにテキストコンテンツをバインドする。
<p v-text="message2"></p>
var app = new Vue({ el: '#app', data: { message2: "Hello Vue.js!", } });
表示結果
<p>Hello Vue.js!</p>
v-html
Mustacheを使った表示は必ずHTMLエンティティ化される（XSS対策）。HTMLタグをタグとしてそのまま表示させたい場合はv-htmlを使う。
<p v-html="message3"></p>
........ data: { message3: "Hello <strong>Vue.js!</strong>" }, ........
表示結果
<p>Hello <strong>Vue.js!</strong></p>
v-htmlを付与しないと次のような結果になる。
<p class="no-html">Hello <strong>Vue.js!</strong></p>
XSS脆弱性対策を省くv-htmlは、信頼できるコンテンツにのみ使用する必要がある。ユーザから受け取ったデータの表示などに使用しないこと。
フォームはもちろん、例としてDBに保存されたユーザ情報やコメント、URLから解析したパラメータやクエリなど。
v-cloak
インスタンスの準備が終わると自動的に取り除かれる。インスタンスの準備が終わるまでのスタイル制御などに使える。
<p v-cloak>{{ message4 }}</p>
........ data: { message4: "Message on cloak" } ........
次のようなスタイルを定義して使うことで、コンパイル前にMustacheなどテンプレートが画面に表示されることを防ぐ。
[v-cloak] {display: none;}
または次のようなスタイルで、読み込み時の#app要素全体の表示を遅らせ、インスタンス作成後にv-cloak属性が外れフェードインしながら表示される。
@keyframes cloak-in { 0% { opacity: 0; } } #app { animation: cloak-in 1s; } #app[v-cloak] { opacity: 0; }
テンプレートやコンパイル制御のために次のディレクティブがある。
