vue自定义指令基础

今天，我们讲讲vue自定义指令基础知识，主要包括指令如何创建，如何注册，以及指令的相关属性钩子函数。

        指令的注册

        我们通过以下方法注册一个全局自定义指令

Vue.directive(name,definition)  //name为指令名称必须保持一致性，definition为指令定义的对象

        以上方法只是定义了一个指令，但并没有实现该指令内部的逻辑，我们可以以下方法进行调用该指令 

<div v-name></div>

        定义局部的自定义指令方法如下，该指令只能该组件内部使用。   

var comp = Vue.extend({
  directives : {
   'localName' : {} // 可以采用驼峰式命名  
  }
});

 

        指令的定义对象    

       创建指令，可以传入指令定义对象，赋予指令一些特殊的功能，这些定义对象主要包括三个钩子函数：bind、update和unbind

       bind：只会被调用一次，在指令初次绑定到元素上时调用。

       update：指令在bind之后以初始值为参数进行第一次调用，之后每次当绑定值发生变化调用，update接受的参数为newValue和oldValue     

       unbind：指令解绑元素调用。

       这三个函数都是可选函数，但注册一个空指令肯定没有意义，来看下面这个例子，会使我们对整个指令周期有更明确的认识      

<div  v-directive="param"></div>
 Vue.directive('directive', {
  bind : function() {
    console.log('bind', arguments);
  },
  update : function(newValue, oldValue) {    
    console.log('update', newValue, oldValue)  },
  unbind : function() {
    console.log('unbind', arguments);
  }
})
var vm = new Vue({
  el : '#app',
  data : {
    param : 'first'
  }
});

 

         指令实例属性

         对指令的生命周期了解后，还需要在指令中能调用相关属性，以便我们对相关的DOM进行操作，在指令的钩子函数内，可以通过this来调用指令实例。

        el ：绑定的 。
        vm：该指令的上下ViewModel，可以为new Vue()的实例，也可以为组件实例

        expression：指令的表达式，不包括函数和过滤器。

        arg：指令参数

        name：指令名称

        modifiers：包含指令的修饰符的对象

        descriptor：包含指令解析结果的对象

        元素指令

        元素指令为特殊指令，普通指令需要绑定到具体的DOM元素，单元素指令可以单独存在。它和普通指令相似，也分为全剧指令和局部指令两种。