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 (上一个编译生成的虚拟节点)