vue 进阶系列之指令

vue 进阶之指令

vue里面有一些默认的指令,如v-show,v-if,v-model….，除了这些之外，我们还可以自定义指令来对纯 DOM 元素进行底层操。
因为vue里面没有提供其他的操作dom的api,所以对dom操作的时候，可以选择用指令的形式，特别是在v-for数据循环的时候需要对dom进行一些操作时，用指令可以分别对每一个item进行操作
So…如果想对dom进行操作，选择指令吧。又好看，又实在~~
注意:写指令命的时候若是用驼峰如setFocus,在元素中,要用v-set-focus!

注册指令的方式:

• 全局注册

Vue.directive('dir-name',{
    bind:function(el,binding){

    }
})

• 组件内注册

directives: {
    dir-name: {
        bind:function(el,binding){

        }
    }
}

指令的钩子函数

• bind
  元素第一次绑定时调用
• inserted(常用)
  元素从父节点插入时调用
• update(常用)
  被绑定元素所在的模板更新时调用，而不论绑定值是否变化.通过比较更新前后的绑定值，可以忽略不必要的模板更新
• componentUpdated (基本不用)
  被绑定元素所在模板完成一次更新周期时调用。
• unbind (基本不用)
  只调用一次， 指令与元素解绑时调用。

指令钩子函数中的参数

例子:

<div v-dir-name:arg.mod='name' ></div>

new Vue({
  el: '#app',
  data: {
    name: 'Eric'
  },
  directives: {
    dir-name: {

    }
  }
})

• el
  指令所绑定的元素 ‘<div v-dir-name:arg.mod='name' ></div>’
• binding
  
  1. name(指令名)—–>dir-name
  2. value(绑定值)—–>Eric
  3. oldValue(绑定的前一个值)
  4. expression(绑定值的字符串形式)—–>name
  5. modifiers(个包含修饰符的对象)—–>{mod:true}//暂时没发现有什么用。
  6. arg(传给指令的参数)—–>arg

• vnode (编译生成的虚拟节点)

• oldVnode (上一个编译生成的虚拟节点)