vue.jsのページにアクセスすると一瞬画面上にマスタッシュ{{ message }}(ダブルカーリーブレース)が表示されます。vue.jsにはv-cloakディレクティブが準備されており、HTMLの要素にv-cloakを設定することでアクセス時のマスタッシュを表示させないように設定することができます。

v-cloakの設定方法

人によってはマスタッシュが表示されるという意味がわからないかもしれないので、マスタッシュが表示されるとはどのようなものかを確認してv-cloakの設定方法を確認します。

マスタッシュが表示されるとは

h1タグにVueインスタンスのデータプロパティmessageを表示させるindex.htmlファイルを作成します。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>v-cloak</title>
</head>

<body>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'v-cloakの設定',
  }
})
</script> 
</body>
</html>

ブラウザでindex.htmlファイルを開くと一瞬画面上に下記のように{{ message }}が表示されるのを確認することができます。表示されるのは、非常に短い時間のでどのようなものが表示されるかまでわからない場合もあります。

マスタッシュが表示される
マスタッシュが表示される

マスタッシュは一瞬ブラウザ上に表示されるだけなので、すぐにmessageの値である”v-cloakの設定”がブラウザ上に表示されます。

Vueインスタンス作成完了後の画面
Vueインスタンス作成完了後の画面

マスタッシュが表示されるということがわかったと思うので、v-cloakの設定を行います。

v-cloakの設定

v-cloakディレクティブは要素ごとに設定を行うことができ、Vueのインスタンスの作成が完了が終わるまで要素上に存在します。つまりVueインスタンスの作成中には要素に属性としてv-cloakディレクティブが設定された状態となり、インスタンス作成が完了すると要素から消えます。

公式のドキュメントではThis directive will remain on the element until the associated Vue instance finishes compilation.と記述されています。

v-cloakを要素に設定するだけではなくCSSと組み合わせる必要があります。v-cloakをdiv要素に追加し、styleタグの中でv-cloakのCSS設定を行います。


<head>
  <meta charset="UTF-8">
  <title>v-cloak</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <h1>{{ message }}</h1>
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
v-cloakはdiv要素の属性なのでcssの属性セレクタ[]を使用しています。v-cloakが表示されている間はdisplay:noneで非表示設定が行われています。

タグへのv-cloakの追加とCSSの設定が完了するとブラウザでindex.htmlファイルを開いてもマスタッシュ{{ }}が表示されることはありません。

<div id=”app”>タグはv-cloakを追加しましたが下記のように一部のタグのみv-cloakを設定してみます。


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

仕様通りv-cloakは要素ごとに設定を行うことができるので、設定を行わなかったh1タグのマスタッシュのみアクセス直後に一瞬だけ画面に表示されます。

マスタッシュが表示される
マスタッシュが表示される