页面加载时如何隐藏VueJS语法？
Answers:
您可以使用v-cloak指令，该指令将隐藏Vue实例，直到编译完成。
HTML：
<div v-cloak>{{ message }}</div>CSS：
[v-cloak] { display: none; }
只是对主要
—
Jeff
Appdiv应该没问题
这行得通，但老兄它笨拙。我真的希望有个更优雅的东西。虽然+1
—
卫斯理·史密斯
似乎
—
珠穆朗玛峰，2017年
v-cloak应该是默认值，如果有人真的想展示给{{ }}他们看，他们应该使用v-uncloak。
display:none在现有的HTML上，对于SEO来说是一个不好的标志。我认为在页面加载之前使用某种覆盖可能更好。
我附上了以下代码笔。您可以看到带和不带的区别v-cloak。
<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>
是的，我明白了...谢谢，您的codepen将为新来者提供帮助。
—
antoniputra '16
在vuejs加载期间，您仍然会获得第一个{{test}}，因此它并不是一个完美的答案
—
twigg
@twigg这就是重点。第一个显示常规标签，第二个显示使用
—
kb。
v-cloak属性的隐藏标签。
正如其他人建议的那样，使用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指令，您可以隐藏未编译的胡子绑定，直到完成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/>'
})请参阅vuetify Webpack模板以获取参考。
另一种解决方案是使用：
<!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")
})是的，您可以使用v-cloak，我喜欢使用spinkit，这是一个只有CSS的很棒的库，请查看一个简单的示例：
var vm = null;
setTimeout(function() {
vm = new Vue({
el: '#app',
data: {
msg: 'Is great, using: ',
url: 'http://tobiasahlin.com/spinkit/'
}
});
}, 3000);#app .sk-rotating-plane,
[v-cloak] > * { display:none }
body{
background: #42b983;
color: #35495e;
}
#app[v-cloak] .sk-rotating-plane {
display:block;
background-color: #35495e;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/tobiasahlin/SpinKit/master/css/spinkit.css">
<div id="app" v-cloak>
<div class="sk-rotating-plane"></div>
<h1>Vue with c-cloak</h1>
<p>
{{ msg }}
<a :href='url'>{{ url }}</a>
<p>
</div>我更喜欢使用v-if计算属性来检查我的数据是否准备就绪，例如：
<template>
<div v-if="shouldDisplay">
{{ variableName }}
</div>
<div v-else>
Here you can insert a loader
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
variableName: null,
};
},
computed() {
shouldDisplay() {
return this.variableName !== null;
}
},
mounted() {
this.variableName = 'yes';
},
};
</script>这样，仅当数据尚未就绪（使用v-else）时，才显示加载器更为容易。
在这种特殊情况下v-if="variableName"也可以，但是可能会有更复杂的情况。
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>这意味着，我应该v-cloak在II想隐藏的每个元素中添加属性？