Vue 2&3进阶面试题：（第二天）

目录

5.vue常用操作指令？

6.v-for为什么要绑定key？

7.v-if和v-show的区别？

8.vue中的修饰符

5.vue常用操作指令？

1. v-text指令：用于更新标签包含的文本，它的作用跟双大括号效果是一样的
2. v-html指令：绑定一些包含html代码的数据在视图上
3. v-show指令：指令的取值为true/false，分别对应着显示/隐藏，改变的是元素css样式的display属性
4. v-if指令：取值为true/false，控制元素是否需要被渲染
5. v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来。
6. v-for指令：遍历data中存放的数组数据，实现列表的渲染。
7. v-bind指令：用于动态绑定DOM元素的属性;例如 标签的href属性，标签的src属性等。v-bind可以简写成“：”
8. v-on指令：可以绑定事件的监听器。通过v-on指令修饰click点击事件，指定事件响应后的处理函数为methods中定义的方法，v-on:简写为@
9. v-model指令：用于表单输入，实现表单控件和数据的双向绑定。只要给input控件添加v-model指令，并指定关联的数据content，就可以轻松把用户输入的内容绑定在content上。
10. v-once指令：只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。

6.v-for为什么要绑定key？

答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。

作用主要是为了高效的更新虚拟DOM。

7.v-if和v-show的区别？

v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏

v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

8.vue中的修饰符

表单修饰符：

v-model.lazy - 取代 input 监听 change 事件

v-model.number - 输入字符串转为有效的数字

v-model.trim - 输入首尾空格过滤

事件修饰符

• .stop: 阻止事件冒泡
• .once: 事件只执行一次
• .prevent: 阻止默认事件
• .capture：与事件冒泡的方向相反，事件捕获由外到内
• .self：只会触发自己范围内的事件，不包含子元素

按键修饰符

• .enter => enter键
• .tab => tab键
• .delete =>删除键
• .esc => 取消键
• .space => 空格键
• .up => 上
• .down => 下
• .left => 左
• .right => 右