Angularばっか触っていたので脳みそ内でAngularとVueがごっちゃごっちゃしてます。

Angularでもありましたが、Vue.jsでも {{ }} の変数解決が行われるまで、ブラウザの画面上に {{ message }} など変数名が一瞬表示されて気持ちが悪い。

ってなわけで、Angularでいうとこのng-cloak的なものがないか探したところ、Vue.jsにもありました。
ただ、ちょっとだけAngularとは異なる部分があったので、そこについてメモを残しておこうと思います。

この記事は、
Vue.js v2.2.6
を使用しています。

v-cloak と ng-cloakの違い

v-cloakを使用すれば、Vue インスタンスのコンパイルが終了するまで表示されていた、 {{ }} を画面に描画させないようにできます。

一点注意が必要なとこは、Angularだと、

<div ng-cloak> 
  {{ message }}
</div>

とするだけでよかったのですが、
v-cloakだと

[v-cloak] {
  display: none;
}

と CSS のルールと組み合わせが必要になってきます。
地味にハマった。ちゃんとリファレンス読まな行きませんね(; ;)

実際のv-cloakを使った簡単なサンプル

sample.html

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

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

    <script src="lib/vue.min.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        }
      })
    </script>
  </body>
</html>

Angularとはちょっと違う。Vueインスタンスのコンパイルが終了するまで表示される変数名{{ message }}を消したい。

v-cloak と ng-cloakの違い

実際のv-cloakを使った簡単なサンプル