Vue3中自定义指令介绍及用法
自定义指令是什么
在开发Vue项目时,大多数都会使用到Vue内置的一些指令,如v-model
、v-if
、v-show
等,这些呢,就叫做指令,而我们自己呢也可以随意创建指令,就叫做自定义指令!
自定义指令钩子函数的参数
●
el
:指令所绑定的元素,可以直接操作DOM。 ●binding
:是一个对象,包含该指令的所有信息。binding 包含的属性具体的分别为:
● arg自定义指令的参数名。
● value自定义指令绑定的值。
● oldValue指令绑定的前一个值。
● dir被执行的钩子函数
● modifiers:一个包含修饰符的对象。
如何创建自定义指令
简单来说,一般分为两种,局部指令
和全局指令
,任何以v
开头的驼峰式命名的变量都可以被创建为一个自定义指令,然后在模板中使用,下面示例:
- 在局部创建使用:修改颜色的指令
js
<template>
<div>
// 这里使用指令
<h2 v-color="'#f00'">这是改变的内容</h2>
</div>
</template>
<script setup lang='ts'>
const vColor = {
mounted(el: any, binding: any) {
el.style.color = binding.value;
},
}
</script>
- 效果
- 在全局创建:
main.js
文件内创建,这样所有组件内都可以使用该指令
ts
// main.js 文件
import '../src/assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
// 定义的指令
app.directive('color', {
mounted(el, binding) {
el.style.color = binding.value
}
})
app.use(router)
app.mount('#app')
ts
<template>
<div>
// 直接在任意组件中使用即可,无需引入
<h2 v-color="'#00f'">全局改变的内容</h2>
</div>
</template>
效果:
自定义指令的八个生命周期和组件的生命周期类似
js
created() {
},
beforeMount() {
},
//dom渲染之后,挂载阶段,教为常用
mounted(el, binding) {
console.log(el, binding);
},
beforeUnmount() {
},
//dom节点修改后的阶段,比较常用
updated(el, binding) {
console.log(el, binding);
},
beforeUpdate() {
},
beforeDestroy() {
},
destroyed() {
},
> _ < 每日一签
美好的一天,上帝不会就这样给你,需要自己去创造。