Vue3 指令（Directive）是 Vue3 中的一种特殊的语法，用于在模板中添加自定义的行为。指令可以用来修改 DOM、监听事件、绑定数据等。下面是 Vue3 指令的主要类型：
1. v-binding
v-binding 指令用于绑定数据到 HTML 属性上。例如：
<div :title="title">...</div>
上面的代码将绑定 title 数据到 <div> 元素的 title 属性上。
2. v-on
v-on 指令用于监听事件。例如：
<button v-on:click="handleClick">Click me!</button>
上面的代码将监听 <button> 元素的 click 事件，并在事件被触发时执行 handleClick 方法。
3. v-model
v-model 指令用于在表单控件中双向绑定数据。例如：
<input type="text" v-model="username">
上面的代码将在 <input> 元素中双向绑定 username 数据。
4. v-if 和 v-else
v-if 和 v-else 指令用于条件渲染元素。例如：
<div v-if="show"><!-- 显示的内容 -->
</div>
<div v-else><!-- 不显示的内容 -->
</div>
上面的代码将根据 show 数据的值来决定是否显示 <div> 元素中的内容。
5. v-show
v-show 指令用于条件显示元素。例如：
<div v-show="show"><!-- 显示的内容 -->
</div>
上面的代码将根据 show 数据的值来决定是否显示 <div> 元素中的内容。
6. v-for
v-for 指令用于遍历数组或对象。例如：
<ul><li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
上面的代码将遍历 items 数组，并将每个元素渲染到 <li> 元素中。
7. v-text 和 v-html
v-text 和 v-html 指令用于将数据绑定到文本或 HTML 内容中。例如：
<p v-text="message"></p>
<p v-html="htmlContent"></p>
上面的代码将将 message 数据绑定到 <p> 元素的文本内容中，并将 htmlContent 数据绑定到 <p> 元素的 HTML 内容中。
8. v-pre
v-pre 指令用于跳过当前元素的编译。例如：
<span v-pre>{{ message }}</span>
上面的代码将跳过 <span> 元素的编译，并将 message 数据绑定到该元素的文本内容中。
9. v-cloak
v-cloak 指令用于在组件中添加一个隐藏的元素。例如：
<div v-cloak><!-- 内容 -->
</div>
上面的代码将添加一个隐藏的 <div> 元素，并在组件中使用该元素。
10. v-slot
v-slot 指令用于在组件中添加一个插槽。例如：
<MyComponent><template v-slot:header><!-- 头部内容 --></template><template v-slot:footer><!-- 底部内容 --></template>
</MyComponent>
上面的代码将在 <MyComponent> 组件中添加两个插槽：header 和 footer。
