vue初识之自定义指令

一、简介

Vue中的自定义指令是一种扩展Vue功能的方式，可以用来封装常用的DOM操作或者添加一些特殊的行为。自定义指令可以在Vue实例中全局注册或者局部注册，注册后可以在模板中使用v-指令的形式调用

二、组成

自定义指令由两个部分组成：指令定义对象和指令钩子函数。指令定义对象包含了指令的名称、绑定时的处理函数、更新时的处理函数、解绑时的处理函数等属性。指令钩子函数则是指令在不同生命周期中的回调函数，包括bind、inserted、update、componentUpdated和unbind等

三、分类

1.全局自定义指令

全局自定义指令是在Vue实例化之前定义的指令，可以在整个应用程序中使用。定义全局指令需要使用Vue.directive()方法
例如：

// 全局定义
        // 第一个参数   自定义指令的名字,定义时不加v-,使用时加v-
        // 第二个参数   对象{}
        Vue.directive('color', {

            // bind 只调用一次,指令第一次绑到元素时调用.在这里可以进行一次性的初始化设置
            // el:当前的DOM元素
            bind(el, binding) {
                // console.log(el);
                // console.log(binding);
                // el.style.color = binding.value
                el.style.color = 'red'
                el.focus()
            },
            // inserted这个元素已经渲染到界面上之后执行
            inserted(el) {
                console.log(el);
                el.focus()
            },
            // update  当元素有更新时执行
            update(el) {
                // console.log(el);
            }

        })

2.私有自定义指令

局部自定义指令是在组件内部定义的指令，只能在该组件内部使用。定义局部指令需要在组件的directives选项中定义
例如

 // 私有定义
            directives: {
                // color自定义指令名字
                color(el, binding) {
                    console.log(el);
                    console.log(binding);
                    el.focus()
                },
                focus: {
                    bind() {

                    },
                    inserted(el) {
                        el.focus()
                    },
                    update() {
                    }
                }
            }

注意：directives在书写时，是与methods,el,data平级的存在

四、总结

自定义指令可以用于操作DOM元素、监听事件、修改样式等，可以让开发者更加灵活地控制页面的行为和样式。同时，自定义指令也可以让开发者更好地理解Vue.js的运作机制，深入了解Vue.js的核心思想和原理