Edited at

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

More than 1 year has passed since last update.

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>