vue2面试题6|[2024-11-11]
关于指令
指令集
| v-text | 填充文本，用于将元素的文本内容设置为指令表达式的值 |
| v--html | 填充网页，将元素的HTML内容设置为指令表达式的值 |
| v-cloak | 隐藏未编译，解决在页面加载过程中，需要时间渲染页面，导致页面出现闪烁的问题。注意：该指令要与css规则一起使用才可以。 |
| v-once | 一次性渲染，将元素或组件的内容只渲染一次，并将其缓存起来，以后再次渲染时不再重新计算。 |
| v-show | 控制元素显示隐藏，其原理是切换display:none，适合频繁切换。 |
| v-if | 也是控制元素的显示隐藏，其基于条件判断，是否创建或移除元素节点，适合不频繁切换的场景。 |
| v-else v-else-if | 辅助v-if进行判断渲染，需要紧挨着v-if 一起使用。 |
| v-on | 作用：注册事件=添加监听+提供处理逻辑 语法有v-on:事件名="内联语句"、v-on:事件名="函数名" 可简写为@事件名="内联语句" |
| v-bind | 动态设置html的标签属性：src、url、title 语法 v-bind:属性名="表达式"，可简写 :属性名="表达式" |
| v-for | 基于数据循环，多次渲染整个元素：数组、对象、数字 v-for="(item,index) in 数组" :key="唯一值" |
| v-model | 给表单元素使用，双向数据绑定，数据和视图两者一致发生改变。v-model="变量" |
指令的修饰符
| @keyup.enter | 键盘回车监听 |
| v-model.trim | 去除首尾空格 |
| v-model:number | 转数字 |
| 事件名.stop | 阻止冒泡 |
| 事件名:prevent | 阻止默认行为 |
| v-bind:class="对象/数组" | 对象：:class="{类名1: 布尔值, 类名2: 布尔值}" 只有布尔值为true，才执行样式 数组：:class="[类名1, 类名2, 类名3]" 数组中的样式都执行 |
| v-bind:style="样式对象" | :style="{CSS属性名1: CSS属性值，CSS属性名2: CSS属性值}" |
问题1：如何自定义指令
全局：main.js
Vue.directive('focus', { inserted(a) { console.log(a); a.focus() }, })
局部：某个组件内
directives: { color: { bind(el, b) { console.log(b); el.style.color = b.value.color }, },
问题2：vue单项绑定
双向绑定：v-model
单向绑定：v-bind
问题3：v-if和v-for优先级
vue2中：v-for > v-if
vue3中：v-if > v-for
至于为什么？源码是这样写的