v-cloak：保持和元素实例的关联，直到结束编译后自动消失。
v-cloak指令和CSS 规则一起用的时候，能够解决差值表达式闪烁的问题（即：可以隐藏未编译的标签直到实例准备完毕）。
就拿上一段代码来举例，比如说，{{name}}这个内容，在网速很慢的情况下，一开始会直接显示{{name}}这个内容，等网络加载完成了，才会显示smyhvae。那这个闪烁的问题该怎么解决呢？
解决办法是：通过v-cloak隐藏{{name}}这个内容，当加载完毕后，再显示出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*2、在样式表里设置：只要是有 v-cloak 属性的标签，我都让它隐藏。
直到 Vue实例化完毕以后，v-cloak 会自动消失，那么对应的css样式就会失去作用，最终将span中的内容呈现给用户 */
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 1、给 span 标签添加 v-cloak 属性 -->
<span v-cloak>{{name}}</span>
</div>
</body>
<script src="vue2.5.16.js"></script>
<script>
new Vue({
el: '#app',
data: {
name: 'smyhvae'
}
});
</script>
</html>
差值表达式和 v-text 的区别
<!-- 差值表达式 -->
<span>content:{{name}}</span>
<!-- v-text -->
<span v-text="name">/span>
区别1： v-text 没有闪烁的问题，因为它是放在属性里的。
区别2 :插值表达式只会替换自己的这个占位符，并不会把整个元素的内容清空。v-text 会覆盖元素中原本的内容。
为了解释区别2，我们来用代码举例：
<!-- 差值表达式 -->
<p>content:++++++{{name}}------</p>
<!-- v-text -->
<p v-text="name">------++++++</p>
上方代码的演示结果：
其实，第二行代码中，只要浏览器中还没有解析到v-text="name"的时候，会显示------++++++；当解析到v-text="name"的时候，name的值会直接替换------++++++。
1069
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
