也许这是一个微不足道的问题。
所以，当我在浏览器上运行我的 vuejs 应用程序时，启用限制下载速度（设置为低连接）。我在浏览器中得到了未完成的 vue 语法输出。
我知道我们可以通过在整个页面加载之前显示加载图像来解决这个问题，但是有没有最好的解决方案来解决这个问题？
如何在页面加载时隐藏 VueJS 语法？
IT技术
javascript
vue.js
2021-03-08 12:05:33
6个回答
你可以使用v-cloak指令，如果你将它与正确的 CSS 结合起来，它将隐藏 Vue 实例直到编译完成。
HTML：
<div v-cloak>{{ message }}</div>
CSS：
[v-cloak] { display: none; }
我附上了以下代码笔。你可以看到有和没有的区别v-cloak。
<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>
正如其他人所建议的那样，使用v-cloak是正确的解决方案。然而，正如@ DelightedD0D 提到的那样，它很笨重。简单的解决方案是在指令的伪选择器::before中添加一些 CSS v-cloak。
在你的 sass/less 文件中，有一些类似的东西
[v-cloak] > * { display:none; }
[v-cloak]::before {
content: " ";
display: block;
position: absolute;
width: 80px;
height: 80px;
background-image: url(/images/svg/loader.svg);
background-size: cover;
left: 50%;
top: 50%;
}
当然，您需要提供一个有效且可访问的加载器图像路径。它会呈现类似的东西。
希望能帮助到你。
使用v-cloak指令可以隐藏未编译的 mustache 绑定，直到 vue 实例编译完成。在编译之前，您必须使用 CSS 块来隐藏它。
HTML：
<div v-cloak>
{{ vueVariable }}
</div>
CSS：
[v-cloak] {
display: none;
}
这<div>在编译完成之前是不可见的。
您可以看到此链接在加载过程中隐藏元素v-cloak以更好地理解。
不要在 HTML 文件中包含任何 vuejs 语法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Super app</title>
</head>
<body>
<div id="app"></div>
<script src="/app.js"></script>
</body>
</html>
在您的主要 JavaScript 中，您可以：
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
另一种解决方案是使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Super app</title>
</head>
<body>
<div id="app" is="App"></div>
<script src="/app.js"></script>
</body>
</html>
和：
import Vue from 'vue'
import App from './App'
Vue.component("App", App);
const app = new Vue({});
window.addEventListener("load", async () => {
app.$mount("#app")
})