javascript - 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" }
        ]
    }
})

但是，在插入任何值之前，页面会短暂显示 mustache 语法。几乎就像 VueJS 不工作一样。片刻之后，VueJS 将启动并为变量填充正确的值。

为什么会这样，我该如何解决这个问题？

Answer 1

这是因为vueJS还没有完全加载。

你可以使用所谓的“v-cloak”来隐藏它。为此，请将其添加到您的 CSS 中:

[v-cloak] {
  display: none;
}

然后像这样用 v-cloak 标签装饰你的元素:

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

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