Vue自定义指令

Vue自定义指令：

1. 全局自定义指令 Vue.directive(name,{})

2. 局部自定义指令 directives(name:{})

两者区别：

全局自定义指令可以在任何实例中应用
局部自定义指令只能在本身的vue实例中应用

钩子函数：

bind： 只调用一次，当指令第一次绑定在元素上市。用来做一次性初始化操作
inserted : 当绑定元素插入到DOM中的时候执行（可以用来 自动获取焦点）
update ： 在包含该组件的VNdeo（虚拟节点）更新后调用该函数，
componentUpdated ： 在包含该组件的VNode以及其子节点的VNodes已更新后调用

钩子函数的参数：

1. el ： 指令所绑定的元素，规定的也是每个钩子函数中的第一个参数，永远不会改变，这个 el 参数，是一个原生的JS 的 DOM对象

2. binding： 第二个参数是一个对象，它包含一些属性(前三个常用，但是其他的也要知道)
   name：指令名，不包括 v- 前缀。
   value： 指令绑定的值，例如：v-count="1 + 1"中，绑定值为 2 expression： 字符串形式的指令表达式。例如：v-count="1 + 1"中，表达式为 1 + 1

3. oldValue： 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 arg： 传给指令的参数，可选。例如
   v-my-directive:foo 中，参数为 “foo” modifiers：
   一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为{ foo: true, bar: true }

4. vnode： Vue 编译生成的虚拟节点。 oldVnode： 上一个虚拟节点，仅在 update 和 componentUpdated
   钩子中可用

局部自定义指令：

bind 钩子函数

<div id="app" v-color>
</div>

<script>
var vm = new Vue({
            el : "#app",
            //局部自定义指令
            directives : {
                    'color' :{  //定义指令的名称
                        bind(el,bindings,vnode){
                            console.log(el)
                            console.log(bindings)
                            console.log(vnode)
                            //给自定义指令设置颜色
                            el.style.color = "green"
                        }
                    }
            }
        })
</script>

修改盒子的颜色：

打印 el bindings VNode

update 钩子函数

update(el,bindings,vnode){
         console.log(el)
         console.log(bindings)
         console.log(vnode)
                        }

这么打印什么都没有，上面已经说过VNode做出改变才会起作用

bind(el,bindings,vnode){
                            console.log(el)
                            console.log(bindings)
                            console.log(vnode)
                            el.style.background = "green"
                            //修改盒子绑定的数据
                             vnode.context.content = "修改盒子"
                        },
                        update(el,bindings,vnode){
                            console.log(el)
                            console.log(bindings)
                            console.log(vnode)
                        }