内置指令学习笔记

指令

指令是Vue.js中一个重要的特性，主要提供了一种机制将数据的变化映射为DOM的行为。Vue.js本身就提供了一些内置指令来进行对DOM的操作，当然我们也可以写自定义指令来操作DOM

回顾一下我们学过的内置指令：

属性	：	使用方法
v-bind	:	单向绑定解析表达式，可简写为：xxx
v-model	:	双向数据绑定
v-for	:	遍历数组/对象/字符串
v-on	:	绑定事件监听，可简写为@
v-if	:	条件渲染(动态控制节点是否存在)
v-else	:	条件渲染(动态控制节点是否存在)
v-show	:	条件渲染(动态控制节点是否展示)

接下来为大家介绍v-text、v-html、v-cloak、v-once、v-pre这五个内置指令

v-text指令

1.作用：向其所在的节点中渲染文档内容。

2.与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}则不会。

v-html指令：

​ 1.作用：向指定节点中渲染包含html结构的内容。

​ 2.与插值语法的区别:

​ (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。

​ (2).v-html可以识别html结构。

​ 3.严重注意：v-html有安全性问题！！！

​ (1).再网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

​ (2).一定要再可信的内容上使用v-html，永不要用在用户提交的内容上！！

v-cloak指令(没有值)：

1.本质是一个特殊属性，vue实例创建完毕并接管容器后，会删除v-cloak属性。

2.使用css配合v-cloak可以解决网速慢时页面展示出{{XXX}}问题

v-once指令：

1.v-once所在节点在初次动态渲染后，就视为静态内容了。

2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

v-pre指令：

1.跳过其所在节点的编译过程。

2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。