【前端】vue3的指令

介绍

Vue 是一个用于构建用户界面的渐进式 JavaScript 框架，核心关注视图层，通过组件化和响应式系统帮助开发者高效构建动态的 Web 应用。Vue 3 引入了更高效的响应式引擎、组合式 API 以及更好的 TypeScript 支持。

指令系统

Vue 的指令以v-前缀开头，用于在模板中为元素附加特定的行为或响应式绑定。

核心结构控制

• v-if：基于表达式真值在 DOM 中有条件地渲染或销毁元素。
• v-else-if：配合v-if在同一链路上提供额外的条件分支。
• v-else：搭配v-if/v-else-if提供兜底渲染分支。
• v-show：通过切换元素的display样式来控制显示与隐藏，元素不会从 DOM 中移除。
• v-for：基于数组、对象或数字生成列表渲染，支持条目和索引/键绑定。

数据绑定

• v-bind：将表达式的值绑定到元素的属性、组件的props或指令参数，可缩写为冒号:。
• v-model：在表单控件与应用状态之间创建双向数据绑定，支持修饰符（如.trim、.lazy、.number）。
• v-text：将元素的textContent设置为表达式的值，避免直接使用 Mustache 语法。
• v-html：将元素的innerHTML设置为表达式的值，允许插入原始 HTML（需注意 XSS 风险）。

事件处理

• v-on：监听 DOM 事件并在事件触发时执行表达式或方法，可缩写为@，支持事件修饰符和键位修饰符。

插槽与模板控制

• v-slot：声明插槽内容或作用域插槽，支持具名和解构语法，是取代slot特性的统一指令。
• v-is：在 DOM 模板中动态设置实际渲染的组件类型，通常用于<component>替代方案。

性能与编译提示

• v-once：只渲染元素和组件一次，后续状态更新不会触发重新渲染。
• v-memo：基于指定表达式的结果决定是否跳过其子树的更新，用于性能优化。
• v-pre：跳过该元素及子元素的编译过程，保留原始 Mustache 语法或优化性能。

其他实用指令

• v-cloak：配合 CSS 隐藏未编译完成的模板内容，编译结束后自动移除。
• 自定义指令：通过app.directive定义v-xxx形式的指令，在元素挂载、更新和卸载阶段注入复用逻辑。

以上指令构成 Vue 3 模板的基础能力，能够满足从数据绑定、控制流、事件处理到性能优化的多种场景。