第3章 Vue3基本指令

Vue3

基本指令3.1

条件渲染指令:v-if与v-elsev-if指令组使用要点V-if:根据表达式真假决定是否渲染元素v-else-if:添加额外条件分支,须紧接v-ifv-else-if:添加额外条件分支,须紧接v-ifv-else:最终默认分支,不需要表达式条件变化时完全销毁或重建DOM指令必须连续使用在相邻元素上支持template标签包裹多个元素适合条件不频繁变化的场景条件为false时不生成任何DOM节点3.1.3

v-show与v-if的区别V-showv-if通过CSS的display属性控制显示隐藏根据条件真假决定是否创建DOM元素无论条件真假都会创建DOM元素条件变化时涉及销毁和重建VS仅切换CSS样式,性能更高初始渲染成本较高初始渲染更高效频繁切换用v-show,条件不变用v-if3.2列表渲染指令v-for:基本用法基本语法v-for='iteminitems'items为数据源数组,item为当前元素别名支持可选索引参数:(item,index)initems对象遍历支持(value,key,index)三参数形式可遍历对象的所有可枚举属性key属性始终为v-for设置唯一的key属性使Vue高效跟踪节点身份避免使用index作为keyv-for还可遍历整数范围,如nin103.2.2

数组更新变更方法(修改原数组)非变更方法(返回新数组)filter():过滤元素concat():合并数组slice():截取子数组用新数组替换旧数组即可触发更新push()/pop():末尾添加或删除shift()/unshift():开头删除或添加splice():插入、删除或替换sort()/reverse():排序或反转3.3

数据绑定指令v-bind参数与属性绑定缩写语法动态绑定HTML特性,如:href="url"支持组件props的绑定传递使用冒号()替代完整v-bind写法如:href="url"等同于v-bind:href="url"动态绑定合并行为v-bind:[attribute]动态指定属性名可直接绑定包含多个属性的对象v-bind="object"与独立属性同时存在后定义的属性值覆盖先定义的同名属性3.4

v-model与表单基本用法值绑定规则实现表单元素的双向数据绑定文本框绑定字符串单个复选框绑定布尔值多个复选框绑定布尔值多个复选框绑定数组单选按钮绑定value值支持.number和.lazy修饰符文本输入:value属性+input事件复选框:checked属性+change事件实质是语法糖,封装值更新和事件监听V-model自动适配不同输入控件类型3.5

方法、计算属性与监听属性计算属性computed监听属性watch基于响应式依赖进行缓存数据变化时执行异步或开销大的操作依赖不变时返回缓存结果无缓存,每次变化都执行VS适合多个值变化影响一个值适合一个值变化影响多个值支持deep深度监听可读性和逻辑性更好3.6

事件处理监听事件绑定DOM事件和自定义事件支持内联表达式或方法引用可监听所有原生DOM事件v-on(简写@)事件处理函数将逻辑封装到methods选项中保持模板简洁清晰便于逻辑复用和单元测试多事件监听使用对象语法同时监听多个事件如v-on="{focses:Foncsed,blur:Unlown}"Vue3取消.native修饰符,改用emits选项声明组件事件事件修饰符与按键修饰符事件修饰符按键与系统修饰键按键修饰符:stop:阻止单击事件传播.prevent:阻止默认行为.capture:事件捕获模式.self:仅自身触发once:只触发一次.passive:不阻止默认行为.enter.tab.esc.space系统修饰键:.ctrl.alt.shift.meta.exact:精确控制修饰键组合修饰符顺序影响行为不要同时使用.passive和,prevent3.6

事件处理3.7

其他基本指令V-cloak

防闪烁指令V-once首次渲染指令元素或组件只渲染一次不需要赋值后续重新渲染视为静态内容可用于优化更新性能避免页面加载时的闪烁现象保留在元素上直到编译完成配合CSS规则使用模块化开发中通常无需v-cloak3.8

自定义指令钩子函数注册方式bind:首次绑定时调用inserted:插入父节点时调用update:VNode更新时调用unbind:解绑时调用全局注册:Vue.directive('name',0)局部注册:组件directives选项动态指令参数函数简写参数可根据组件实例数据更新如v-mydirective:[argumentj="value"bind和update触发相同行为时可简写可传入对象字面量自定义指令用于封装DOM操作,提高代码重用性3.9

案例实践案例一:随机背景色案例二:注册登录页面使用自定义指令v-img,先随机背景色填充元素区域,图片加载完成后替换为背景图,解决网络慢时图片加载体验问题使用v-model