一、Vue3 指令
Vue 3 指令是 Vue 模板中用于与 DOM 进行交互的特殊属性。指令以 v- 为前缀，后面跟着指令名称。Vue 3 提供了一系列内置指令，同时你也可以创建自定义指令。下面是一些 Vue 3 中常用的内置指令：
- v-bind
用于属性绑定，将表达式的结果绑定到一个元素的属性上。
<img v-bind:src="imageSrc" alt="Vue logo">
简写形式为 :：
<img :src="imageSrc" alt="Vue logo">
- v-model
用于在表单元素上创建双向数据绑定。
<input v-model="message" placeholder="edit me">
<p>Message is: {
{ message }}</p>
- v-on
用于监听 DOM 事件，并在触发时执行一些 JavaScript 代码。
<button v-on:click="increment">Increment</button>
简写形式为 @：
<button @click="increment">Increment</button>
- v-if、v-else-if、v-else
用于条件渲染。根据表达式的值来决定是否渲染一个元素。
<div v-if="type === 'A'">
Render A
</div>
<div v-else-if="type === 'B'">
Render B
</div>
<div v-else>
Render Others
</div>
- v-for
用于列表渲染。基于源数据多次渲染一个元素或模板块。
<div v-for="item in items" :key="item.id">
{
{ item.text }}
</div>
- v-show
根据表达式的值的真假，切换元素的displayCSS 属性。
<p v-show="isVisible">Hello when visible</p>
- v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始的 Mustache 标签。
<div v-pre>
{
{ this will not be compiled }}
</div>
- v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<div v-cloak>
{
{ message }}
</div>
[v-cloak] {
display: none;
}
- v-once
将元素和组件标记为只渲染一次。
<span v-once>This will only be rendered once.</span>
v-text
更新元素的textContent。<span v-text="message"></span>v-html
更新元素的innerHTML。<div v-html="htmlContent"></div>
除了这些内置指令，Vue 3 还允许你注册自定义指令。自定义指令可以扩展 Vue 的基本功能，用于执行复杂的 DOM 操作或处理特定的业务逻辑。
二、注册-自定义指令
注册自定义指令有两种方式：全局注册和局部注册。全局注册的指令可以在任何 Vue 实例中使用，而局部注册的指令只能在特定的 Vue 实例或组件中使用。
注册自定义指令的基本语法如下：
// 全局注册
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 局部注册
const app = Vue.createApp({
})
app.directive('focus', {
// 定义指令
})
app.mount('#app')
三、常见自定义指令
在 Vue 3 中，自定义指令允许你注册一些可以在模板中重复使用的行为。这些行为可以附加到任何元素上，并在元素的特定生命周期钩子中执行自定义逻辑。以下是一些 Vue 3 中常见的自定义指令及其案例代码：
1. 聚焦指令（v-focus）
当页面加载时，自动将焦点聚焦到指定的元素上。
// main.js 或其他初始化文件
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 全局注册自定义指令 v-focus
app.directive('focus', {
mounted(el) {
el.focus()
}
})
app.mount('#app')
<!-- App.vue -->
<template>
<div>
<input v-focus type="text" placeholder="自动聚焦到这个输入框">
</div>
</template>
2. 高亮指令（v-highlight）
将匹配的文本在元素中进行高亮显示。
// main.js 或其他初始化文件
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 全局注册自定义指令 v-highlight
app.directive('highlight', {
beforeMount(el, binding) {
el.innerHTML = el.innerHTML.replace(new RegExp(binding.value, 'gi'), function(matched) {
return `<span style="background-color: yellow;">${
matched}</span>`
})
}
})
app.mount('#app')
<!-- App.vue -->
<template>
<div>
<p v-highlight="'vue'">在这里，'vue' 会被高亮显示。</p>
</div>
</template>
3. 防抖指令（v-debounce）
对事件处理函数进行防抖处理，减少不必要的计算或请求。
// main.js 或其他初始化文件
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 全局注册自定义指令 v-debounce
app.directive('debounce', {
beforeMount(el, binding) {
let timer = null
el.addEventListener('input', function() {
clearTimeout(timer)
timer = setTimeout(() => {
binding.value()
}, binding.arg || 500)
})
}
})
app.mount('#app')
<!-- App.vue -->
<template>
<div>
<input v-debounce="search" type="text" placeholder="防抖处理，输入后延迟500ms执行">
</div>
</template>
<script>
export default {
methods: {
search() {
console.log('执行搜索')
}
}
}
</script>
4. 限制输入指令（v-limit）
限制输入框中字符的数量。
// main.js 或其他初始化文件
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 全局注册自定义指令 v-limit
app.directive('limit', {
mounted(el, binding) {
el.addEventListener('input', function() {
if (el.value.length > binding.value) {
el.value = el.value.slice(0, binding.value)
}
})
}
})
app.mount('#app')
<!-- App.vue -->
<template>
<div>
<input v-limit="10" type="text" placeholder="最多输入10个字符">
</div>
</template>
使用注意事项
- 在使用自定义指令时，要确保指令名称不与 Vue 的内置指令名称冲突。
- 在自定义指令的钩子函数中，
el参数是绑定指令的元素，binding参数是一个对象，包含了一些有用的属性，如name（指令名）、value（指令的绑定值）、oldValue（指令绑定的前一个值）、arg（指令的参数）、modifiers（包含修饰符的对象）。 - 如果需要监听多个事件或进行更复杂的 DOM 操作，可以考虑
