v-cloakが効かない

一瞬表示される {{ hoge }} を隠したい

一瞬下記のような表示がされてしまう。

{{ hoge }}

これを防ぐために、v-cloakディレクティブが用意されている。

v-cloak ディレクティブ

https://jp.vuejs.org/v2/api/#v-cloak

このディレクティブは Vue インスタンス が用意されるまでの間、コンパイルされていない Mustache バインディングを隠すのに使うことができます。

※Mustache バインディング ( {{ }} <- これ )

サンプルのとおりにすればよかったものを、下記のように記述した。

<div id="foo" v-cloak style="display:none;">
{{ foo }}
</div>

これだとまったく表示されなかった。

サンプルのとおりに、インラインでスタイルを書かないようにして解決。

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

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

結論

v-cloak ディレクティブを使うときは、インラインで display:none; のスタイルを書いちゃだめ。