【Vue.js】リロード時に一瞬見える{{}}を非表示にする

はじめに

Vue.jsの課題に取り組んでいる際に気になったことを、備忘録として記録。

問題

Vue.jsでは{{ 変数名 }}(マスタッシュ構文)と書くことで、Vueで指定した変数の値をHTMLに埋め込むことができる。
しかし、リロード直後に一瞬{{ 変数名 }}が見える→変数の値が表示される、という具合なので、マスタッシュ構文がちらつかないようにしていく

解決方法

「v-cloak」と呼ばれるディレクティブを使う。
コンパイルで時間がかかると{{}}が残って見えてしまうようなので、CSSで非表示にする。

このディレクティブは関連付けられた Vue インスタンスのコンパイルが終了するまでの間残存します。[v-cloak] { display: none } のような CSS のルールと組み合わせて、このディレクティブは Vue インスタンス が用意されるまでの間、コンパイルされていない Mustache バインディングを隠すのに使うことができます。

以下のようにv-cloakを書き足す。

HTML

<section id="user-goal" v-cloak>
    <p>{{ course }}</p>
</section>

CSS

[v-cloak] {
  display: none;
}

おわりに

結構リロード直後に{{}}がちらつくのが気になっていたので、解決できて良かった。他にもVue.jsでは様々なディレクティブがあるので活用していきたい

参考