Vue3 的指令-第二章

Vue 3 中的指令分为内置指令和自定义指令两大类，以下是详细的分类和说明：

内置指令

Vue 3 提供了一些常用的内置指令，用于直接操作 DOM 或实现特定功能。

v-text
更新元素的文本内容，相当于模版语句{{}}

<span v-text="message"></span>

v-html
插入 HTML 内容，可以加入标签如<div>等，不加标签时等同于v-text

<div v-html="rawHtml"></div>

v-show
根据条件显示或隐藏元素（通过 CSS display 控制）。

<div v-show="isVisible">显示内容</div>

v-if / v-else-if / v-else
条件渲染，完全销毁或创建 DOM 节点。

<div v-if="score > 90">优秀</div>
<div v-else-if="score > 60">及格</div>
<div v-else>不及格</div>

v-for
循环渲染列表，需搭配 :key 使用。

<li v-for="(item, index) in items" :key="item.id">{{ item.name }}</li>

使用map也可以有同样的效果吧

<div>
  {{arr.map(item=>
   ({num:item})
  )}}
</div>
 
const arr:number[] = [1,2,3,4,5];

v-on
绑定事件监听器，可缩写为 @。

<button @click="handleClick">点击</button>

v-bind
动态绑定属性，可缩写为 :。

<img :src="imageUrl" alt="图片">

v-model
双向数据绑定，通常用于表单输入。

<input v-model="username" type="text">

v-slot
用于插槽内容分发，可缩写为 #。

<template v-slot:header>插槽内容</template>

v-pre
跳过当前元素及其子元素的编译。

<div v-pre>{{ 原始内容 }}</div>

v-once
只渲染元素和组件一次，后续更新跳过。

<span v-once>{{ 静态内容 }}</span>

v-memo
（Vue 3.2+）优化渲染，仅依赖项变化时更新。

<div v-memo="[dependency]">{{ expensiveValue }}</div>

v-cloak
隐藏未编译的模板直到 Vue 实例准备完成。

<div v-cloak>{{ message }}</div>

自定义指令

可以通过 app.directive() 注册全局自定义指令，或在组件中通过 directives 选项注册局部指令。

全局注册示例

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

局部注册示例

export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      }
    }
  }
}

使用自定义指令

<input v-focus type="text">

指令钩子函数
自定义指令支持以下生命周期钩子：

• created：元素属性绑定前调用。
• beforeMount：指令首次绑定到元素时调用。
• mounted：元素插入父 DOM 后调用。
• beforeUpdate：组件更新前调用。
• updated：组件更新后调用。
• beforeUnmount：组件卸载前调用。
• unmounted：指令与元素解绑后调用。

对比 Vue 2 的变化

1. v-model 改进：支持多个 v-model 绑定（如 v-model:title）。
2. v-for 的 key 强制要求：不再允许省略 :key。
3. v-on 的 .native 移除：组件事件需通过 emits 声明。
4. 新增 v-memo：用于性能优化。