Vue 2：模板与指令（修饰符、条件/列表、key、插槽）
一、事件与表单修饰符
表单与 v-model
v-model.lazy：失焦后再同步到数据。v-model.number：尝试转为数字（配合type="number"更自然）。v-model.trim：去掉首尾空格。
事件
.stop：阻止冒泡.self：仅当事件目标为绑定元素自身时触发.once：只触发一次.prevent：默认行为preventDefault.passive：不阻止默认行为（适合滚动等，提升滚动性能）.capture：捕获阶段触发
鼠标 / 键盘
- 鼠标：
.left、.right、.middle - 键盘：
.enter、.esc、.up等，以及修饰键组合
修饰符可串联使用。
二、v-if 与 v-for 的优先级
- Vue 2：
v-for优先于v-if（先循环再判断），同一元素上容易做多余遍历。 - Vue 3：
v-if优先于v-for，false时可跳过循环。
实践建议
不要在同一元素上同时使用两者。改用：
- 外层
template/div拆条件与列表； - 或
computed先过滤再v-for。
三、v-if 与 v-show
| v-if | v-show | |
|---|---|---|
| 实现 | 条件为假时不创建/销毁（或整段不渲染） | 通过 CSS 显隐（如 display） |
| 场景 | 切换少、初渲染可省节点 | 频繁切换显隐 |
| 分支 | 可配合 v-else 链 | 无 else 语义 |
具体选型仍看业务与性能侧写。
四、key 的作用
key是同一父节点下子 VNode 的身份标识，diff 时用于判断「是否同一节点」。- 有稳定 key：可复用/移动 DOM，减少销毁重建。
- 无 key / 用 index 当 key：列表重排、头插时易错复用（输入框焦点错位、状态串行）。
为何慎用 index 作 key？
- 动态列表增删排序时，下标变而业务实体未变，index 会误导 diff。
- 纯静态展示、无子状态的列表，index 风险相对小。
是否只用于 v-for？（与 diff 章节一致）
不仅限列表；凡同一层多个可复用子节点都受益，列表是最典型场景。
五、自定义指令
- 用于 DOM 层横切能力：聚焦、懒加载、权限、埋点、防抖等。
- Vue 2 常用钩子名如
inserted；全局Vue.directive，局部directives选项。
六、插槽 slot
作用
父组件向子组件插入片段，由子组件占位决定渲染位置，做到「结构定制、逻辑仍封装在子组件」。
三类
- 默认插槽：子组件
<slot/>，父组件标签体内写默认内容。 - 具名插槽：
slot="header"或v-slot:header/#header。 - 作用域插槽：子组件在
<slot>上绑定数据，父组件v-slot="{ row }"接收——适合「数据在子、展示由父决定」（如表格列自定义）。
与 props
- props：偏配置、数据传入。
- 插槽：传入大块模板/结构。
Vue 2.6+
推荐 v-slot / # 统一写法；Vue 3 移除 slot/slot-scope 旧属性语法。
示例结构
子组件：默认槽、具名槽、作用域槽暴露 d1、方法 changeD1；父组件用 v-slot:slot2="{ d1, changeD1 }" 调用。
七、小结
- 列表：稳定 key + 避免
v-if与v-for同节点。 - 显隐：少切换用
v-if，频繁切换用v-show。 - 插槽：布局与复用的利器，与 props 分工明确。
下一章：虚拟 DOM 与 diff。