vue.jsのテンプレートが一瞬表示されてしまう件

Question

表題の件でvue.jsの{{value}}のようなテンプレートを処理完了まで隠したい
一般的な対策方法は

v-cloak

をタグに付けてcssで

[v-cloak] {
  display: none;
}

とします。

そこで、本題ですが
{{value}}みたいなテンプレートが画面上に出ないのをデフォルトにするべきだと思うのですが
なぜvue.jsは出るのがデフォルトなのでしょうか？{{value}}が一瞬出てもいいのが世界的には多数なの？気にしているのは日本人だけ？明らかに不格好だと思うし、多くのWEBを知らない人は一瞬バグったと思うでしょう。

いちいちv-cloakを付けずに全ての処理のテンプレートを完了するまで隠したい（または描写してほしくない）のですが
そいいうことはvue.jsでは不可能なのでしょうか？

お忙しいところ恐縮ですがご存知の方お教えくださいませ

Answer 1

v-cloakをデフォルトにすると、すべての描画が終わるまで画面が出ないので不安になるかも？と思います。

あと、大抵はデータベースからデータを非同期に読み込んで画面を組み立てることが多いと思いますが、その場合はLoading画面を出すことが多いので、v-cloakは不要です。

{{ Mustache }}が一瞬表示されるのが嫌ならv-textを使う手もありますね。

Comments

[tesopgmh]

おお！v-textを使う方法もあるんですね！

＞Loading画面を出すことが多い
というのはレイヤー等で画面を隠すということですか？
javascript側で組み立てない限り、HTML側は先に表示されてしまいますよね？？

[naga3]

<div v-if="loading">Loading..</div>
<div v-if="!loading">メインコンテンツ</div>
自分はこんな感じでloadingをtrueにしておいて、データの読み込みがすべて終わったらfalseにします。
これで{{ Mustache }}が出ることはあまりないのですが、気になるときはv-cloakやv-textを使います。

[tesopgmh]

なるほどですね！具体的な記述ありがとうございます！