Vue.jsでローディング中にテンプレートが見えるのを防ぎたい

この記事では、
Vue.jsでローディング中にテンプレートが見えるのを防ぐ
方法について紹介します。

ローディング中、{{text}}⇦まま表示されてしまう問題を解決します。

やり方

変更前

<div id="app">
    <p>{{text}}</p>
</div>

const App = {
  data() {
    return {
      text: "aaaa"
    }
  }
}

このままだとローディング時にテンプレートが見えてしまいます。

変更後

<div id="app" v-cloak>
    <p>{{text}}</p>
</div>

[v-cloak] {
  display: none;
}

この2つの記述をすることでローディング時のテンプレート見える問題を防ぐことができます。

最後に

今回は、
Vue.jsでローディング中にテンプレートが見えるのを防ぐ方法についてご紹介しました。

私自身、Vue.jsの学習を始めたばかりなので、間違え等あるかと思いますので、コメント等でご指摘願います。

最後まで読んでいただきありがとうございます。