v-cloak的使用
cloak单词意思：遮盖层 它的出现就是为了解决在未加载代码导致的闪烁现象
比如：
<div id="ctr-01">
<p >{{first}}</p> //first是之前new vue中设置的一个属性 值‘vue是什么?’
</div>
-
（1）对控制域的父元素标签中使用
<div v-cloak id="ctr-01"> <p >{{first}}</p> //first是之前new vue中设置的一个属性 值‘vue是什么?’ </div>
（2）在含有插值表达式的子元素标签中使用
<div id="ctr-01">
<p v-cloak >{{first}}</p> //first是之前new vue中设置的一个属性 值‘vue是什么?’
</div>
- 再设置隐藏
<style type="text/css">
[v-cloak]{
display: none !important; /*防止被覆盖*/
}
</style>
v-cloak会使标签在内部插值表达式加载完之前 应用 [v-cloak]的css属性 !important防止属性被覆盖
但是我个人认为 用visibility更好一点
<style type="text/css">
[v-cloak]{
visibility: hidden !important; /*防止被覆盖*/
}
</style>
比如 如下代码
<div id="ctr-01" >
<div v-cloak style="background-color: antiquewhite;">++++{{first}}-----</div>
<div style="height: 20px;width:20px;border-radius: 50%;background-color: red;"></div>
</div>
如果使用display：none 加载前会导致 内部第二个div在第一个div的位置（被隐藏了 不占位置）
1559903670367.png
加载完成后
1559903702796.png
而使用visibility：hidden就不会出现这个问/题
cloak本意就是不想让用户看到闪烁 捡了芝麻丢了西瓜好像不太好
