Vue.js　

説明

Vue.jsにおけるv-cloakは、ページのフラッシュ問題を解決するためのディレクティブです。Vueインスタンスのロードおよびテンプレートのコンパイルには時間がかかるため、ロード中に未コンパイルの{{変数}}が表示され、視覚的な不連続性が生じる可能性があります。

v-cloakディレクティブの役割は、Vueインスタンスが準備できるまで関連する要素を非表示にし、それをコンパイル後の内容に置き換えるまで隠すことです。これにより、ページのロード中に未コンパイルのテンプレート構文を表示することなく、ページのフラッシュ問題を回避できます。

v-cloakディレクティブを使用するには、CSSで”display: none;”というプロパティを持つスタイルを定義し、そのスタイルをv-cloakディレクティブと関連する要素に適用する必要があります。Vueインスタンスが準備できると、v-cloakディレクティブは自動的にスタイルを削除し、要素のコンパイル後の内容を表示します。

例

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

<style>
[v-cloak] {
  display: none;
}
</style>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Vue.jsをご利用いただきありがとうございます！'
  }
});
</script>

上記の例では、v-cloakディレクティブが{{ message }}を含むdiv要素に適用されています。Vueインスタンスが準備されるまで、そのdiv要素は非表示になります。Vueインスタンスのコンパイルが完了すると、v-cloakディレクティブが削除され、div要素はコンパイル後の内容が表示されます。これにより、未コンパイルのテンプレート構文が表示されず、ページのフラッシュ問題が回避されます。