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», чтобы скрыть это. Чтобы сделать так, добавьте в ваш CSS:

[v-cloak] { 
    display: none; 
} 

И украсить ваш элемент с v-плаща тэгом как так:

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

Более подробную информацию можно найти по адресу: https://vuejs.org/v2/api/#v-cloak