vue中的自定义指令

出了vue中默认的v-model、v-if、v-show等，未来满足我们日常需要,我们也可以使用自定义等一些指令

怎么添加自定义指令

全局指令：指可以在全局使用的指令

import Vue from 'vue'
// 注册全局指令 v-lower
Vue.directive('lower',{
    bind:function(el,binding){
        el.innerHTML = binding.value.toLocaleLowerCase()
    }
})

局部指令:定义在某个组件内部，只在这个组件内部使用

// 某组件
data(){
    return {
       // ... 
    }
},
computed:{
  // ...  
},
directives: {
  lower: {
    // 指令的定义
    bind:function(el,binding){
        el.innerHTML = binding.value.toLocaleLowerCase()
    }
  }
},
methods:{
    // ...
}

指令等钩子函数

• bind:只执行一次,当指令第一次绑定时执行。
• update:当指令所在的VNode(虚拟DOM)更新时调用
• inserted:当指令所在的元素被绑定到其父节点时调用，但此时指令等值可能还不存在
• componentUpdated:指令所在等组件及其子组件全部更新后调用
• unbind:指令和所在元素结绑时调用，只执行一次

钩子的参数

指令钩子函数会被传入以下参数：

• el：当前指令所绑定的DOM元素，可用来直接做一些dom层操作
• binding:包含被绑定的值的一个对象，包括
  • name:指令的名字
  • value:指令绑定的值
  • oldValue：指令上一次绑定的值。仅在 update 和 componentUpdated 钩子中可用。
• vNode:vue的虚拟dom
• oldVNode:旧的虚拟dom.   

函数的简写

很多时候，我们bind和update时，执行的都是同一个函数，这时我们可以用以下方式。

Vue.directive('lower', function(el,binding){
   el.innerHTML = binding.value.toLocaleLowerCase()
})