[JavaScript知识库]vue3.0 如何自定义指令

前言

本篇博客是基于vue3.0的自定义指令开发教程，（有版本变化会持续更新）其中会列出如何使用以及与vue2.0的自定义指令的对比。

一， Vue3.0自定义指令教程

demo中，包含一个很简单的一键复制指令,不需要再下载插件，很好用的

先看看 vue3.0官方文档如何介绍： 官方文档传送门

自定义指令的作用：主要是为了重用涉及普通元素的的底层DOM的访问逻辑

自定义指令可以局部注册也可以全局注册，再平时开发过程中使用较多的是全局自定义指令。

一：局部注册

直接上代码，一目了然

<template>
    <input type="text" name="" v-focus value="">
</template>
<script>
// 局部自定义指令
const focus = {
    mounted: (el) => {
        el.focus();
    }
}
export default {
    directives: {
        focus
    },
    data() {
        return {}
    },
}
</script>

二：全局注册

1. 在src目录下新建文件directives目录，里边建index.js文件

文件内容如下

const directives = {
   install: ((app) => {
       // 更改颜色   一般就是用这种简化形式就足够了
       // 这种简化形式的写法会在钩子函数'mounted'和'updated'中调用
       app.directive('selfcolor', (el, binding) => {
           el.style.color = binding.value;
       });
       // 点击按钮一键复制
       app.directive('selfCopy', (el, binding) => {
           el.onclick = () => {
               console.log(binding.value)
               if (!binding.value) {
                   alert('不能复制空文本');
                   return false;
               }
               navigator.clipboard.writeText(binding.value);
               alert('复制成功')
           }

       });
       // 对象字面量  指令可以接受任何合法的javascript表达式
       app.directive('objectParams', (el, binding) => {
           console.log(binding.value)
           console.log(binding.arg)
       });
       //数组
       app.directive('arrayParams', (el, binding) => {
           console.log(binding.value[1])
       });
       // 测试所有生命周期
       app.directive('testLifeCycle', {
           // 在绑定元素的 attribute 前
           // 或事件监听器应用前调用
           created(el, binding, vnode, prevVnode) {
               // 下面会介绍各个参数的细节
           },
           // 在元素被插入到 DOM 前调用
           beforeMount(el, binding, vnode, prevVnode) {},
           // 在绑定元素的父组件
           // 及他自己的所有子节点都挂载完成后调用
           mounted(el, binding, vnode, prevVnode) {
               console.log(binding);
               console.log(binding.modifiers);
               if (Object.keys(binding.modifiers).length == 0) {
                   alert('说明没有传修饰符');
                   return false;
               }
               alert('说明传了修饰符')
           },
           // 绑定元素的父组件更新前调用
           beforeUpdate(el, binding, vnode, prevVnode) {},
           // 在绑定元素的父组件
           // 及他自己的所有子节点都更新后调用
           updated(el, binding, vnode, prevVnode) {},
           // 绑定元素的父组件卸载前调用
           beforeUnmount(el, binding, vnode, prevVnode) {},
           // 绑定元素的父组件卸载后调用
           unmounted(el, binding, vnode, prevVnode) {}
       });
   })
}
export default directives;

2. 在main.js文件中注册

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
// 全局注册自定义指令
import selfDirectives from './directives/index.js';
app.use(selfDirectives);
app.mount('#app');

如上，注册完毕，就可以在整个项目中使用了。

3. 在页面中使用

<template>
   <div class="main" v-selfcolor="color">测试自定义指令 </div>
   //一键复制功能
   <input type="button" name="" v-selfCopy="text" value="复制按钮">
   //默认聚焦
   <input type="text" name="" v-focus value="">
   指令内传对象以及arg 传递给指令的参数
   <div v-objectParams:argVariable="{color:'blue',name:'张三'}">指令内传对象</div>
   <div v-arrayParams="[{
     name:'张三',
     age:13
   },{
     name:'李四',
     age:12
   }]">指令内传数组</div>
   //修饰符
   <div v-testLifeCycle.selfModifiers="'测试生命周期'">测试生命周期</div>
</template>
<script>
export default {
   data() {
       return {
           color: 'red',
       }
   },
}
</script>
<style scoped>
</style>

二， 自定义指令钩子生命周期和钩子参数

• a, 指令钩子的生命周期

• b, 指令钩子的钩子参数

三，Vue3.0自定义指令和2.0自定义指令的异同？

生命周期不同，钩子函数参数不同

以下列出vue2.0的指令的钩子函数和钩子函数参数，请自行与上文中的3.0的对比

vue2.0钩子函数

vue2.0钩子函数参数