v-preディレクティブ
v-preディレクティブを使用する場面
・要素と全ての子要素のコンパイルをスキップしたいときに使用します。
→生のマスタッシュ構文を表示させたいとき。
→XSS対策
→ディレクティブの無い大量のノードをスキップすることで、コンパイルのスピードをあげたいとき
例(v-preディレクティブを使用しない)
マスタッシュ構文をしようして、Hello vue.js!!と表示させます。
index.html
<div id="app">
<p>
{{message}}
</p></div>
index.js
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue.js!!",
}
})
ブラウザ
例(v-preディレクティブ使用)
v-preディレクティブを使用して、マスタッシュ構文の部分のコンパイルをスキップさせます。
index.html
<div id="app">
<p v-pre>
{{message}}
</p></div>
index.js
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue.js!!",
}
})
ブラウザ
