vue2-vue自定义指令

vue2-vue自定义指令

1. 什么是指令

• 在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统我们平时使用的v-开头的，都是指令，不同的指令完成不同的功能
• 比如v-xxx，会实例化一个指令，不接受参数
• v-xx=‘value’，将值传到指令中
• v-xx=“‘string’”,将字符串传入到指令中，v-html=“‘'"
• v-xx:arg=“value”，v-bind：class=“className”
• v-xx:arg.modifier=“value”，使用修饰符
• 除了vue内置的指令，我们还可以自定义指令

2. 自定义指令

• 自定义指令可以分为全局注册和局部注册

2.1 全局注册

• 全局注册主要通过Vue.directive(‘directiveName’,option)来进行注册

Vue.directive('focus',{
    insert:function (el){
        el.focus()
    }
})
<input v-focus/>

2.2 局部注册

• 局部注册在组件的options选项中通过directives属性进行配置

directives:{
    focus:{
        inserted:function (el){
            el.focus()
        }
    }
}
<input v-focus/>

3. 自定义指令的钩子函数

• 自定义指令也像组件那样存在钩子函数
• bind，只调用一次，在指令第一次绑定到元素时调用
• unbind，只调用一次，在指令与元素解绑时调用
• inserted，被绑定元素插入父节点是调用，仅保证父节点存在，不保证插入文档
• update，所在徐建的VNode更新时调用，但是可能发生在其子VNode更新之前
• componentUpdate,指令所在组件的VNode以及其子VNode全部更新后调用

4. 钩子函数的参数

• 所有的钩子函数都有以下4个参数
• el，指令所绑定的元素，可以用来直接操作ODM
• binding：一个对象，包含以下属性
  • name：指令名
  • value，指令绑定的值
  • oldValue，指令绑定的前一个值
  • expression，指令绑定的字符串表达式
  • arg，传给指令的参数
  • modifiers，一个包含修饰符的对象
• vnode，Vue编译生成的虚拟节点
• oldNode，上一个虚拟节点，仅在update和componentUpdate钩子函数中可用

4. 用例

<div v-myDirective="{name:'tom',age:12}"></div>
<script>
  Vue.directive('myDirective',function (el,binding){
      console.log(binding.value.name)//tom
  })
</script>