Vue.js v-cloak | 波括弧のちらつきをなくす

v-cloakとは?

VueJSのv-cloakディレクティブについて見ていこう。

VueJSで使用されるv-cloakは組み込みディレクティブであり、VueJSでレンダリングされる前にブラウザ上で内容を隠す役割を持つ。ここでいう「隠す」とは、隠したり表示したりするv-ifやv-showの役割とは異なる。

違いを理解するために、まずVue.jsの動作方式を見ておこう。

1. ブラウザでページソースを読み込む。
2. VueJSフレームワークを実行する。
3. VueJSの処理が完了する。

この処理の過程で、Vue.jsが処理される前の画面には、{{ }}式やv-ifなどで表示しないはずの内容がそのまま露出することがある。Vue.jsでレンダリングされるまでのごく短い時間だが、避けにくい過程である。これを防ぐにはv-cloakを使用すればよい。

VueJS v-cloakを使った実装

v-cloakを要素に適用すると、VueJSの処理が完了した後にv-cloakディレクティブは自動的に削除される。言い換えると、タグからv-cloakという属性が削除される。そのため、v-cloakが適用された要素を画面に表示しないようにするCSSプロパティdisplay: none;を指定しておけば、Vue.jsの処理が完了するまで、その要素はユーザーに表示されない。

まず機能を実装するため、次のようにv-cloakが適用されたタグ要素を隠して表示されないようにdisplay: noneを指定する。

[v-cloak] {
  display: none;
}

そして、適用するタグには次のようにv-cloakディレクティブを追加する。

<div v-cloak>
    Hello, {{ name }}
</div>

これにより、VueJSがすべてのDOM要素の処理を完了すると、自動的にv-cloakが消え、適用されていたタグ要素が画面に出力される。

v-cloakを使ってローディングメッセージに置き換える

v-cloakは読み込み後に自動的に消えることが分かった。これを別の方法でローディングメッセージに置き換える方法もある。CSSスタイルに次のように適用すると、疑似セレクタ::beforeを使って「Loading」という文言を出力し、その後に該当するすべての要素を非表示にできる。

[v-cloak]::before {
  content: '読み込み中...'
}

[v-cloak] > * {
  display:none;
}

参考

• v-cloak | Vue.js