v-cloakディレクティブ
v-cloakディレクティブを使用する場面
・ページを表示開始してから、Vueインスタンスの作成が終わるまでの間に、マスタッシュタグなどのコンパイル前のテンプレートが表示されてしまうのを防ぎたいときに使用します。
例(v-cloakを使用したチラつき防止)
インスタンスのコンパイルが終了するまで、該当の要素をCSSで非表示にする流れは以下のようになります。
①インスタンスのコンパイルが終了するまで非表示にしたい要素に、v-cloakディレクティブを設定します。
②CSSでv-cloakが付いている要素を非表示にします。
③v-cloakディレクティブは、インスタンスの準備が終わると、自動的に取り除かれます。
index.html
<div id="app">
<p v-cloak>
{{message}}
</p></div>
index.js
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!!'
}
})
style.css
[v-cloak] {
display: none;
}
処理の流れ
こうすることで、マスタッシュタグが一瞬見えてしまう現象を防ぐことができます。