使用Vue编写自定义指令

最新推荐文章于 2023-09-27 11:02:19 发布

devincob

最新推荐文章于 2023-09-27 11:02:19 发布

阅读量851

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/devincob/article/details/106403458

版权

VUE 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

自定义指令编写的方式有2种

1、全局自定义指令

全局的指令必须要在实例化之前进行定义

Vue.directive(参数1,参数2)
- 参数1: 指令的名称
- 参数2: 指令实现的函数
  - 参数2-1: el 指令作用的元素
  - 参数2-2: 对象 {modifiers:修饰符 value:表达式的结果}

2、局部自定义指令

在vue中添加一个熟悉 directives key值是指令名称 value是指令实现的函数
在这里插入图片描述

自定义指令有五个钩子函数（声明周期-均为可选)：

inserted：被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于document中)。
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
update：被绑定于元素所在的模板更新时被调用,而无论绑定值是否发生变化通过比较更新前后的绑定值，可以忽略不必要的模板更新
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
[被绑定元素所在模板完成一次更新周期时调用] unbind：只调用一次，指令与元素解绑时调用。

指令钩子函数会被传入以下参数：
**el：**指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
**name：**指令名，不包括 v- 前缀。
**value：**指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
**oldValue：**指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
**expression：**字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
**arg：**传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode： Vue编译生成的虚拟节点。移步 VNode API 来了解更多详情。
**oldVnode：**上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200528142201945.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RldmluY29i,size_16,color_FFFFFF,t_70

贴一篇完整code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
    <style>
        .box{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-qr.a="msg"></div>
    <button v-add.click="handleClick">点击</button>
    <div class="box" v-color="color"></div>
</div>
<hr>
<div id="app1">
    <div v-qr.a.b="msg"></div>
    <button v-add.click="handleClick">点击</button>
    <div class="box" v-color="color"></div>
</div>
</body>
</html>
<script>
    Vue.directive("qr", (el, {modifiers,value})=>{
        let {a,b} = modifiers; el.innerText = value;
        if(a){
            el.style.color="#c2c";
        }
        if(b){
            el.style.fontSize="24px"
        }
    })
    Vue.directive("add",(el,{modifiers,value})=>{
        let {click} = modifiers;
        if(click){
            el.addEventListener("click",value);
        }
    });
    new Vue({
        el:"#app",
        data:{
            msg:'绑定的值',
            color:"#c33"
        },
        methods:{
            handleClick(){
                alert(1);
            }
        },
        directives:{
            "color"(el,{modifiers,value}){
                value  =  value || '#000';
                el.style.background= value
            }
        }
    });
    new Vue({
        el:"#app1",
        data:{
            msg:'1905',
            color:"#c33"
        },
        methods:{
            handleClick(){
                alert(2);
            }
        }
    })
</script>