Vue3 指令 6

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。