【vue.js】v-cloakを使ってアクセス直後のマスタッシュ構文のチラつきを解消する方法

【vue.js】v-cloakを使ってアクセス直後のマスタッシュ構文のチラつきを解消する方法

問題点

vue.jsのページにアクセスすると一瞬、画面上にマスタッシュ構文が表示されてから出力されるため、表示がチラつく。

解決方法

v-cloakとCSSを組み合わせることでv-cloakが、Vueインスタンスを生成する間、Vueオブジェクトと紐づけてる処理や変数を隠すことができる。

HTML部分

<div id="test" v-cloak>{{message}}</div>

CSS部分

[v-cloak] {
  display: none;
}

Vueインスタンスの作成中には要素に属性としてv-cloakディレクティブが設定された状態となり、インスタンス作成が完了すると要素から消える。