前端面试题--你常用的vue指令有哪些？

vue中有很多的指令，形式都是v-？？？

下面总结了一些常见指令，分别有：v-on、v-bind、v-model、v-for、v-show、v-if、v-else/v-else-if、v-text、v-html、v-cloak、v-once、v-pre

 1.v-on

用于绑定事件

v-on可以简写成@，例如v-on：事件名可以简写为@事件名

比如@click，@keyup，@input....

2.v-bind

单向数据绑定，它是为标签里的某个属性绑定值用的

v-bind可以简写为：，例如v-bind：href='xxx'，可以简写为：href='xxx'

3.v-model

双向数据绑定，v-model只能应用在表格类元素（如：input、select等）

简写：v-model:value，可以省略value ---> 简写为v-model，因为v-model默认收集的就是value值

4.v-for遍历

可以用来遍历数组、遍历对象、迭代数字

5.v-show

条件渲染，v-show指令通过改变元素的css属性来决定元素是显示还是隐藏。v-show等于false时，相当于设置了样式为display：none。

6.v-if

条件渲染，与v-show类似，唯一不同的是，当v-if = false的时候，直接删掉DOM结构

7.v-else/v-else-if

v-else-if和if语句中else if 的用法相同

v-else：当v-if不成立时执行

注意：如果用v-if 和 v-else去做判断，中间不能被打断

8.v-text

用于将数据填充到标签中，作用于插值语法表达式类似，但是没有闪动问题（如果数据中有HTML标签会将HTML标签一并输出）

注意：

1.v-text会把解析到的文本完全替换掉标签里面的内容

2.不能解析字符串，v-text会把所有的字符串都当成正常的文本解析，不会当成标签，及时你的data里的str数据中有标签结构

9.v-html

v-html 和v-text的区别：它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当做html标签解析后输出

共同点：都会全部替换原本标签里的内容

严重注意：html有安全性问题

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

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

10.v-cloak

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

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

11.v-once

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

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

12.v-pre

跳过Vue在有v-pre属性的所在节点的编译过程

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

总结：

• v-on : 绑定事件监听, 可简写为@
• v-bind : 单向绑定解析表达式, 可简写为 :xxx
• v-model : 双向数据绑定
• v-for : 遍历数组/对象/字符串
• v-show : 条件渲染 (动态控制节点是否展示)
• v-if : 条件渲染（动态控制节点是否存存在）
• v-else : 条件渲染（动态控制节点是否存存在）
• v-text：将数据填充到标签中（不会解析填充内容中的HTML标签）
• v-html：将数据填充到标签中（会解析填充内容中的HTML标签）
• v-cloak：一个特殊属性，Vue接管标签后会删掉这个属性（没有值）
• v-once：只渲染一次，之后Vue就不再渲染这个标签了（视为静态内容了）
• v-pre：Vue不接管这个属性所在的标签（可用于加快编译速度，用于没有使用指令语法、没有使用插值语法的节点上）