vue3的自定义指令

Vue3中自定义指令介绍及用法

自定义指令是什么

在开发Vue项目时,大多数都会使用到Vue内置的一些指令,如v-modelv-ifv-show等,这些呢,就叫做指令,而我们自己呢也可以随意创建指令,就叫做自定义指令!

自定义指令钩子函数的参数

el:指令所绑定的元素,可以直接操作DOM。 ● binding:是一个对象,包含该指令的所有信息。

binding 包含的属性具体的分别为:

● arg自定义指令的参数名。

● value自定义指令绑定的值。

● oldValue指令绑定的前一个值。

● dir被执行的钩子函数

● modifiers:一个包含修饰符的对象。

如何创建自定义指令

简单来说,一般分为两种,局部指令全局指令,任何以v开头的驼峰式命名的变量都可以被创建为一个自定义指令,然后在模板中使用,下面示例:

  1. 在局部创建使用:修改颜色的指令
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>
  • 效果
  1. 在全局创建: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() {
        
    },

> _ < 每日一签

美好的一天,上帝不会就这样给你,需要自己去创造。

相关推荐
IT_陈寒8 分钟前
Redis 性能翻倍的 5 个隐藏技巧,99% 的开发者都不知道第3点!
前端·人工智能·后端
街尾杂货店&16 分钟前
css word属性
前端·css
fruge2 小时前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
知识分享小能手6 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
MC丶科7 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
lijun_xiao20099 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔10 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼10 小时前
JavaWeb_p165部门管理
java·开发语言·前端
90后的晨仔10 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔10 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js