vue-自定义指令

  有时候，我们仍不可避免的要对DOM进行底层的操作，这时候就要用到自定义指令。

  来看一个最简单的。

< body>

< div id= "app">

< input type= "text" v-focus>

</ div>

< script src= "./vue.js"></ script>

< script>

Vue. directive( 'focus',{

inserted: function( el){

el. focus();

}

})

var app = new Vue({

el: '#app'

})

  来一步一步解析它，指令是以"v-指令名的形式"写在你要绑定的DOM元素上，在DOM元素上注册好了指令,我们还要实现它，

Vue.directive('指令名',{函数}).这点跟组件的实现有点像，接下来，我们要在函数里面写什么呢，怎么写。

首先，自定义指令的选项是由几个钩子函数组成的：

bind:只调用一次，指令第一次绑定到元素时使用，用这个钩子函数，可以做一些初始化的动作；

inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在document之中）;

update:被绑定元素在模板更新的时候调用；

componentUpdated：被绑定元素所在模板完成一次更新周期时调用；

unbind：只调用一次，指令与元素解绑时调用。

那么，写在钩子函数里的参数又是什么，有什么用？

  钩子函数常用的有两个参数，el和binding.

el——指令绑定的元素，可以直接来操作DOM。

binding:一个对象，包含以下几个属性：

      name:指令名，不包括v-前缀、

     value:指令绑定的值 ，比如说 v-mydir="1+1",这里的value为2.

     oldValue:指令绑定的前一个值，在updata和componentUpdated钩子函数中可用，

     express:绑定值的字符串表示，比如上面那个例子的express为“1+1”，

     arg:传递给指令的参数，比如说： v-mydir：foo="1+1"  arg为foo。 

    modifiers:一个包含修饰符的对象，比如说：v-mydir.foo.bar,修饰符对象modifiers的值是 {foo:true,bar:ture}.

vnode:Vue编译生成的虚拟节点。

oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中有效。

来看实例，验证一下，上面的属性。

iv id= "app">

< div v-test:msg. a. b= "message">

</ div>

</ div>

< script>

Vue. directive( 'test', {

bind: function( el, binding, vnode){

var keys =[];

for( var i in vnode){

keys. push(i);

}

el. innerHTML =

'name:' + binding. name + '<br>' +

'value:' + binding. value + '<br>' +

'expression:' + binding. expression + '<br>' +

'argument:' + binding. arg + '<br>' +

'modifiers:' + JSON. stringify( binding. modifiers) + '<br>' +

'vnode keys:' + keys. join( ',')

}

});

var app = new Vue({

el: '#app',

data:{

message: 'some text'

}

})

结果显示为：

为指令传入多个值，只需要传入一个字面量对象就好了。

< body>

< div id= "app">

< div v-test= "{msg:'hello',name:'Aresn'}"></ div>

</ div>

< script src= "./vue.js"></ script>

< script>

Vue. directive( 'test',{

bind: function( el, binding, vnode){

console. log( binding. value. msg)

}

})

var app = new Vue({

el: '#app'

})

</ script>