Vue v-cloak的使用

v-cloak的使用

cloak单词意思：遮盖层 它的出现就是为了解决在未加载代码导致的闪烁现象

比如：

            
{{first}}
 //first是之前new vue中设置的一个属性 值‘vue是什么?’

1. （1）对控制域的父元素标签中使用

   
            
   {{first}}
    //first是之前new vue中设置的一个属性 值‘vue是什么?’
   
   

（2）在含有插值表达式的子元素标签中使用

         
{{first}}
 //first是之前new vue中设置的一个属性 值‘vue是什么?’

2. 再设置隐藏

v-cloak会使标签在内部插值表达式加载完之前 应用 [v-cloak]的css属性 !important防止属性被覆盖

但是我个人认为 用visibility更好一点

比如 如下代码

            
++++{{first}}-----
            

        

如果使用display：none 加载前会导致 内部第二个div在第一个div的位置（被隐藏了 不占位置）

1559903670367.png

加载完成后

1559903702796.png

而使用visibility：hidden就不会出现这个问/题

cloak本意就是不想让用户看到闪烁 捡了芝麻丢了西瓜好像不太好

---