VueJS - 显示一瞬间的Mustache语法

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-cloak标签装饰你的元素,如下所示:

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

有关更多信息,请访问:https: //vuejs.org/v2/api/#v-cloak