VueJS - スプリットための第二

Question

を示す口ひげの構文は、私がVUEを習得しようとすると、テストの目的のために純粋に以下のサンプルを作成しています：

import App from '../comp/app.vue'; 
import Two from '../comp/two.vue'; 

const routes = [ 
    { path: '/', component: App }, 
    { path: '/two', component: Two } 
] 
const router = new VueRouter({ 
    base: base.pathname, 
    mode: "history", 
    routes // short for routes: routes 
}) 

window.app = new Vue({ 
    el: "#container", 
    data: { 
     message: "home", 
     date: new Date(), 
     seen: false, 
     fruits: [ 
      { name: "apple" }, 
      { name: "orange" }, 
      { name: "banana" } 
     ] 
    } 
}) 

しかし、任意の値を挿入する前に、ページがために口ひげの構文を表示します。短い瞬間。あたかもVueJSが動作していないかのように。しばらくすると、VueJSが起動し、変数の正しい値を入力します。

は、なぜそれが起こっていると私は、この動作を修正することができますか？

Answer 1

vueJSがまだ完全にロードされていないためです。

あなたはそれを隠すためにいわゆる "v-cloak"を使うことができます。

[v-cloak] { 
    display: none; 
} 

そしてそうのように、V-マントタグを使用して要素を飾る： https://vuejs.org/v2/api/#v-cloak

：

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

詳細情報はで見つけることができますあなたのCSSに以下を追加し、そうするには