vue指令之v-cloak, v-text, v-bind, v-on 及插值表达式闪烁问题

v-cloak指令，解决插值表达式闪烁问题

在渲染data中的数据的时候，常见的一个方式是使用插值表达式“{{ }}”，但是使用插值表达式会存在一个闪烁问题

  

    
{{ msg }}
  

  

什么是闪烁?

如果用户浏览网页的时候网速足够快的话，并不明显，再调试的时候：F12 Network 网速调为 Slow 3G，刷新页面就会发现页面在还未加载出数据的时候会把插值表达式显示出来，如下图：

 怎么解决插值表达式闪烁问题？

在 p 标签中加入 v-cloak 属性

{{ msg }}

给 v-cloak 添加 display 样式 

 

v-text指令

相对于插值表达式， v-text 是没有闪烁问题的，使用方式如下：

 既然 v-text 和 v-cloak 指令都可以避免闪烁问题，那么他们之间的区别在哪里?

++++++++ {{ msg }} ----------
==================

运行结果：

 可以发现，v-text 会覆盖元素中原本的内容，但是 插值表达式  只会替换自己的这个占位符，不会把整个元素的内容清空

 

v-html指令

{{msg2}}

1212112

其中，data 中 msg2 为 “

哈哈，我是一个大大的H1， 我大，我骄傲

”

运行结果：

可以看出，v-text 和 v-html 的区别：v-html指令输出html，而其他的只是把数据当成了一个字符串，不会识别

标签

 

v-bind指令

v-bind: 是 Vue中，提供的用于绑定属性的指令

注意： v-bind: 指令可以被简写为  :要绑定的属性

v-bind 中，可以写合法的JS表达式

 

v-on 指令（事件绑定机制）

注意，v-on: 指令可以简写成  @要绑定的时间