問題点
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ディレクティブが設定された状態となり、インスタンス作成が完了すると要素から消える。