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;
}

 

 

処理の流れ

 

こうすることで、マスタッシュタグが一瞬見えてしまう現象を防ぐことができます。