Vue 自定义指令

在线示例1
在线示例2

• 全局注册,局部注册

自定义指令的作用是用于对DOM元素进行底层操作

在线示例 可以看到不用自定义指令是很麻烦的

自定义指令的钩子里面没有vue实例，this指向undefined

钩子函数

• bind 类似于created 只调用一次，指令第一次绑定到元素时调用，此时被绑定元素在页面上还不存在
• inserted 类似于mounted ,被绑定元素插入到dom的时候执行，此时该元素在页面上已经存在了
• update 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）
• componentUpdated 被绑定元素所在模板完成一次更新周期时调用
• unbind 只调用一次，指令与元素解绑时调用

钩子函数内的参数

• el: 被绑定的元素，可以用来直接操作 DOM el.innerHTML el.addEventListener
• binding: 一个对象, 指的是指令本身 v-abc:???.a.b.c="balabala"

name:abc
value:计算后的结果 例如： v-myDirective=”1 + 1”, value 的值是 2
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用
expression: 'balabala'
arg: ???
modifiers:  { a: true, b: true, c: true }
vnode: Vue 编译生成的虚拟节点
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

[arg] 动态指令参数

v-mydirective:[argument]=“value”

未指明钩子函数时，默认bind和update中

var vm = new Vue({
            el: "#app",
            data: {
                flag:true
            },
            //自定义局部指令的时候，如果直接跟一个函数，没有写(bind inserted update)的时候，就相当于把该函数写到了bind和update中
            directives:{
                fontsize:function(el,binding){
                    el.style.fontSize = binding.value+'px'
                }
            }
        })