実現したいこと

ページを表示開始してから、インスタンスを作成が終わるまでぼ間に、マスタッシュタグなどコンパイル前のテンプレートが表示されてしまうのを防ぎたい。

解決方法

インスタンスのコンパイルが終了するまで、該当の要素をCSSで非表示する

<p v-cloak>{{ message }}</p>

[v-cloak] {
    display: none;
}
Vueのルールでディレクティブは[]で括る

処理の流れ

1. ページの表示開始：描画なし <p v-cloak>{{ message }}</p>
2. インスタンスのコンパイル中：描画なし <p>{{ message }}</p>
3. インスタンスの準備完了：描画される <p>{{ message }}</p>