Vue v-cloak的使用

v-cloak的使用

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

比如：

<div id="ctr-01">
            <p >{{first}}</p> //first是之前new vue中设置的一个属性 值‘vue是什么?’
</div>

1. （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>

2. 再设置隐藏

<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的位置（被隐藏了 不占位置）

加载完成后

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

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