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还没有装满。

你可以使用所谓的＆＃34; v-cloak＆＃34;隐藏它。 为此，请将此添加到您的css：

[v-cloak] {
  display: none;
}

用v-cloak标签装饰你的元素，如下所示：

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

更多信息可在以下网址找到： https://vuejs.org/v2/api/#v-cloak