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
。