v-text\v-html\v-cloak\v-once

一.学过的指令

v-bind：单向绑定表达式，可简写为：XXX

v-model:双向数据绑定

v-for：遍历数组、对象、字符串

v-on:绑定事件监听，可简写为@

v-if:条件渲染（动态控制节点是否存在）

v-else:条件渲染（动态控制节点是否存在）

v-show:条件渲染（动态控制节点是否存在）

二.v-text指令

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

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

<div v-text="name"></div>

三.v-html

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

2.与插值语法的区别：

（1）v-html会替换掉节点中所有的内容，{{xx}}则不会

（2）v-html可以识别HTML结构

3.严重注意：v-html有安全性问题
（1）在网站上动态渲染任意的HTML是非常危险的，容易导致XSS攻击

（2）一定要在可信的内容上使用v-html，永不要在用户提交的内容上

<div v-html="str"></div>

其中
str:'<h3>你好啊</h3>'

四.v-cloak（没有值）

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

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

style属性选择器，选择所有v-cloak的标签

五.v-once

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

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

六. v-pre

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

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