vue3的自定义指令怎么用vue3的全局自定义指令怎么写。自定义指令的钩子函数。简单易懂

三、自定义指令中的生命周期钩子函数

指令定义对象可以提供如下几个钩子函数（按需引入）

• created ：绑定元素属性或事件监听器被应用之前调用。该指令需要附加需要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用。

• beforeMounted ：当指令第一次绑定到元素并且在挂载父组件之前执行。

• mounted ：绑定元素的父组件被挂载之后调用。

• beforeUpdate ：在更新包含组件的 VNode 之前调用。

• updated ：在包含组件的 VNode 及其子组件的 VNode 更新后调用。

• beforeUnmounted ：在卸载绑定元素的父组件之前调用

• unmounted ：当指令与元素解除绑定且父组件已卸载时，只调用一次。

一、注册一个全局的自定义指令，创建一个文件夹 busDirective > index.js

export default {

    install(app) { 

        app.directive('color', { // color 是指令的名字

            created(el, binding) { // el 是当前绑定的元素，binding 是一个对象

                console.log(binding.value);

                el.style.backgroundColor = binding.value // binding.value 就是指令绑定的内容，也是等号里面的值

            },

            updated(el, binding) {

                el.style.backgroundColor = binding.value

            },

        })

    }

} 

1、 钩子函数被赋予了以下参数： el：指令所绑定的元素，可以直接操作DOM。 binding：是一个对象，包含该指令的所有信息。 binding 包含的属性具体的分别为：

2、 arg 自定义指令的参数名。 value 自定义指令绑定的值。 oldValue 指令绑定的前一个值。 dir 被执行的钩子函数 modifiers：一个包含修饰符的对象。

二、在 min.js 中使用

import {

    createApp

} from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

 + import directive from './busDirective/index'

createApp(App).use(store).use(router).use(directive).mount('#app') // use使用

三、然后搭配 vuex 的state v-color 就可以改指定元素的颜色

<template>

  <div>

    <div v-color="'red'">全局指令 可以配合全局state数据来灵活使用</div>

  </div>

</template>

​

<script>

export default {

  setup() {},

};

</script>

<style scoped>

div {

  width: 200px;

  height: 200px;

}

</style>

一、vue3 组件里的自定义指令书写格式

---

<template>

  <div>

    <div v-color="'要传递的值'">vue3组件级自定义指定</div>

  </div>

</template>

​

<script>

//自定义指令动态参数

const autoFocus = {

  color: {

    beforeMount(el, binding) {

      console.log("el", el);

      el.style.backgroundColor = "pink";

      console.log(binding.value); // 要传递的值

    },

  },

};

export default {
#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/717cd1b62e89dfb502e90084e1bd57d5.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/5f41ac78b651addb03e7c550c53662f8.png)

![](https://img-blog.csdnimg.cn/img_convert/3aeec00b3cfb8a6fe10ce4a57d6e767d.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**