6、插值表达式和v-text指令

插值表达式和v-text都是显示数据的，但是插值表达式有个问题，如果频繁刷新页面或者网速特别慢的时候，页面会先显示{{msg}} 然后才会显示它指代的hello vue

vue中有个指令可以解决这个问题  v-cloak ，vue在页面传递数据时，如果插值表达式先开始没得到值，那么v-cloak会执行css样式display:none 不显示，待得到数据后移除这个样式。

那么，v-cloak要放在什么位置呢，是不是每个需要渲染数据的标签都要添加这个指令，经过试验发现，v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以

<div class="#app" v-cloak>
    <p>{{value.name}}</p>
</div>

并且css中添加

[v-cloak]{
    display:none
}

但有时候会不起作用，可能是两个原因：

1.v-cloak的display被层级更高的覆盖掉了，所以要提高层级

[v-cloak]{
    display:none !important
}

2.样式放在@import引入的css文件中

v-cloak放在@import引入的css文件中是不起作用的，可以放在link引入的css中或者写在内联样式中

 

v-text不会出现插值表达式出现的问题，那么为什么还存在插值表达式，而不全部用v-text呢？

因为插值表达式可以把vue传递过来的数据和用户自己定义的数据结合起来用，而v-text只能显示vue传递过来的数据，会替换掉节点里面已经有的数据。

<div id="app" v-cloak>
<p>这是从vue对象里获取的数据{{msg}}</p>
<p v-text="msg">这是从vue对象里获取的数据</p>
</div>

 

参考：vue -- v-cloak解决刷新或者加载出现闪烁（显示变量）

参考：Vue学习之路第三篇：插值表达式和v-text的区别