Vue指令是模板与逻辑交互的桥梁，本质是编译时识别属性并绑定响应式行为；v-if销毁DOM、v-show仅切样式；v-for必须用唯一key；v-model是:value+@input语法糖；v-on/v-bind支持修饰符和动态绑定。
Vue.js 的指令是模板层与逻辑层交互的桥梁，理解它们的原理和用法，比死记语法更重要。 指令不是魔法，本质是 Vue 在编译模板时识别特定属性（如 v-if、v-model），并绑定对应的数据响应式行为。掌握核心指令，能写出更清晰、可维护的组件逻辑。
条件渲染：v-if / v-else-if / v-else 与 v-show 的关键区别
v-if 是“真正”的条件渲染——条件为假时，对应 DOM 元素被完全销毁和重建；v-show 只是切换元素的 display: none 样式，元素始终保留在 DOM 中。因此：
- 频繁切换且对性能敏感（如 tab 切换）→ 优先用
v-show - 初始条件为假、后续极少变化（如权限控制入口）→ 用
v-if更节省内存 -
v-else和v-else-if必须紧跟在v-if或另一个v-else-if后，不能用在独立标签上 - 避免对同一元素同时使用
v-if和v-for（官方不推荐），应改用计算属性过滤列表
列表渲染：v-for 的正确写法与 key 的不可替代性
v-for 支持遍历数组、对象、数字甚至字符串。但必须为每个循环项提供唯一的 key，这不是可选项：
-
key告诉 Vue 虚拟 DOM 如何追踪节点身份，缺失或使用index作 key 会导致状态错乱（如输入框内容错位、动画异常） - 理想 key 是每项数据中稳定、唯一、不重复的标识字段（如
user.id），而非:key="index" - 遍历对象时，参数顺序为
(value, key, index)；遍历数组时为(item, index)或(item, index, array) - 需要响应式地添加/删除数组项时，用
push()、splice()、sort()等 Vue 检测到的方法，避免直接赋值arr[0] = xxx
双向绑定：v-model 的本质与自定义组件支持
v-model 是语法糖，底层等价于 :value + @input（或 @update:modelValue 在 Vue 3）。它让表单控件与数据自动同步：
- 原生 input/select/textarea 默认监听
input事件；checkbox和radio特殊处理值类型（布尔/字符串） - 修饰符很实用：
.lazy改为监听change；.number自动转数字；.trim自动去首尾空格 - 在自定义组件中启用
v-model，需声明modelValueprop 并触发update:modelValue事件（Vue 3）；Vue 2 使用valueprop +input事件 - 多个
v-model（如不同 prop）可用v-model:xxx语法（Vue 3）或model选项（Vue 2）
事件与属性绑定：v-on 与 v-bind 的简写与进阶技巧
v-on（简写 @）和 v-bind（简写 :）是基础但高频的指令：
- 事件修饰符链式使用：
@click.stop.prevent相当于阻止冒泡+阻止默认行为，比在方法里写e.stopPropagation(); e.preventDefault()更简洁 - 按键修饰符支持别名（
@keyup.enter）或自定义键码（@keyup.13），Vue 3 还支持@keyup.page-down等语义化写法 -
v-bind可绑定单个属性（:id="userId"），也可用对象批量绑定（:class="{ active: isActive, 'text-danger': hasError }"）或数组（:class="[activeClass, errorClass]"） - 动态绑定属性名用方括号语法：
:[dynamicPropName]="value"，适合构建高度复用的封装组件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
