vue 自定义指令

进一步使用vue知识构建项目中了解了vue的自定义指令这一知识，记录过程分享；

参考网址：https://cn.vuejs.org/v2/guide/custom-directive.html

我个人对vue指令的理解为： “重复性比较高DOM操作封装”

1. 注册指令

全局注册：通过vue实例的directive方法组册指令，directive方法接受两个参数，分别为指令名称，指令操作集合（Object），vue官网的案例代码如下：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // inserted钩子函数，当被绑定的元素插入到 DOM 中时被调用，el为绑定指令的DOM
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部注册：通过暴露的vue实例上添加directive属性（Object）组册指令，directive中key为指令名，value为指令操作集合（Object），案例如下：

html：

<div>
    <p>
        <b>v-red(背景红色)：</b>
        <span v-red>测试文案</span>
    </p>
</div>

javascript：

export default {
    directives:{
        // 添加自定义指令v-red，设置指令效果为绑定bom颜色为红色
        red: {
            inserted:function(el){
                el.style.background = 'red';
            },
        }
    }
}

2.指令钩子函数

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

• unbind：只调用一次，指令与元素解绑时调用。

案例代码如下：

html：

<div>
    <p>
        <b>v-red(背景红色)：</b>
        <span v-red>测试文案</span>
        <span v-red>{{val}}</span>
    </p>
    <div> 
        
        <input type="text" v-model="val">
        <i>通过数据双向绑定改变DOM</i>
    </div>
</div>

javascript:

export default {
    directives:{
        red: {
            bind:function(){
                console.log('初次绑定dom')
            },
            inserted:function(el){
                console.log('dom插入父节点')
                el.style.background = 'red';
            },
            update:function(el){
                console.log('dom更新')
                el.style.background = 'blue';
            },
            componentUpdated:function(){
                console.log('dom更新结束')
            },
            unbind:function(){
                console.log('解绑指令')
            }
        },
    },
    data(){
        return{
            val:''
        }
    }
}

初次加载页面显示如下：

初次加载控制台输出如下：

input输入内容页面显示如下：

input输入内容控制台输出如下：

跳转页面控制台输入如下：

3.指令钩子函数入参

• 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 钩子中可用。

ps：我常用的有el、binding

4.指令传参

如果指令需要动态的入参时可通过binding.value接收，案例如下：

html：

<template>
    <div>
        <p>
            <b>v-bgColor(指令传参)：</b>
            <span v-bgColor="{color:color}">测试文案</span>
        </p>
        <div>
            <el-select v-model="color" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <i>控制台监听自定义指令的钩子函数</i>
        </div>
    </div>
</template>

javascript:

<script>
export default {
    data(){
        return{
            color:'',
            options:[
                {
                    label:'红色',
                    value:'red',
                },{
                    label:'灰色',
                    value:'gray',
                },{
                    label:'蓝色',
                    value:'blue',
                },{
                    label:'绿色',
                    value:'green',
                },
            ]
        }
    },
    directives:{
        bgColor:{
            inserted:function(el,binding){
                el.style.background = binding.value.color;
            },
            update(el,binding) {
                el.style.background = binding.value.color;
            },
        }
    }
}
</script>

效果图：

 

以上就是我在学习vue自定义指令方面的收获了，更过关于vue自定义指令的知识请参考vue官网～