vue3.0 如何自定义指令

Posted 2022-09-21 郝艳峰Vip

前言

---

本篇博客是基于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, 指令钩子的生命周期

生命周期	何时调用	参数
created	在绑定元素的 attribute 前或事件监听器应用前调用	el, binding, vnode, prevVnode
beforeMount	在元素被插入到 DOM 前调用	el, binding, vnode, prevVnode
mounted	在绑定元素的父组件及他自己的所有子节点都挂载完成后调用	el, binding, vnode, prevVnode
beforeUpdate	绑定元素的父组件更新前调用	el, binding, vnode, prevVnode
updated	在绑定元素的父组件及他自己的所有子节点都更新后调用	el, binding, vnode, prevVnode
beforeUnmount	绑定元素的父组件卸载前调用	el, binding, vnode, prevVnode
unmounted	绑定元素的父组件卸载后调用	el, binding, vnode, prevVnode

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

钩子参数	作用
el	指令绑定到的元素。这可以用于直接操作 DOM。
binding	一个对象，包含以下属性。
binding.value	传递给指令的值。例如在 v-my-directive=“1 + 1” 中，值是 2。
binding.oldValue	之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
binding.arg	：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 “foo”。
binding.modifiers	一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 foo: true, bar: true 。
binding.instance	使用该指令的组件实例。
binding.dir	指令的定义对象。
vnode	代表绑定元素的底层 VNode。
prevNode	之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

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

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

---

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

vue2.0钩子函数

生命周期	何时调用	参数
bind	只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。	el, binding, vnode, oldVnode
inserted	被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。	el, binding, vnode, oldVnode
update	所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有	el, binding, vnode, oldVnode
componentUpdated	指令所在组件的 VNode 及其子 VNode 全部更新后调用。	el, binding, vnode, oldVnode
unbind	只调用一次，指令与元素解绑时调用。	el, binding, vnode, oldVnode

vue2.0钩子函数参数

钩子参数	作用
el	指令绑定到的元素。这可以用于直接操作 DOM。
binding	一个对象，包含以下属性。
binding.name	指令名，不包括 v- 前缀。
binding.value	传递给指令的值。例如在 v-my-directive=“1 + 1” 中，值是 2。
binding.oldValue	之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
binding.expression	字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
binding.arg	：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 “foo”。
binding.modifiers	一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 foo: true, bar: true 。
vnode	Vue 编译生成的虚拟节点
oldVnode	上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。