Vue.js实战读书笔记--自定义指令

第8章  自定义指令

8.1 基本用法       

         自定义指令的注册也分为全局注册和局部注册，比如：

//局部
Vue.directive('focus':{
         //指令选项
});
//全局
var app = new Vue({
         el:'#app',
         directive:{
                   focus:{
                            //指令选项
                   }
         }
});

         自定义指令的选项由几个钩子函数组成，每个都是可选的。

bind:只调用一次，指令第一次绑定到元素时调用，用这个函数定义一个在绑定时执行一次的初始化操作。

Inserted:被绑定元素插入父节点时调用。

Update:被绑定元素所在模板更新时调用，不论绑定值是否变化，通过比较更新前后绑定值，可以忽略不必要的模板更新。

ComponentUpdate:被绑定元素所在模板完成一次更新周期时调用。

Unbind:只调用一次，指令与元素解绑时调用。

<div id="app">
         <input type="text" v-focus>
</div>
<script>
         Vue.directive('focus',{
                   inserted:function(el){
                            //聚焦元素
                            el.focus();
                   }
         });
         var app = new Vue({
                   el:'#app'
         })
</script>

         每个钩子函数都有几个参数可用，它们的含义如下：

el:指令所绑定的元素，可以用来直接操作DOM；

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

         name:指令名，v-前缀；

         value:指令的绑定值；

         oldValue:指令绑定的前一个值，仅在update和componentUpdated钩子中可用，无论值是否改变都可用；

         expression:绑定值的字符串形式。      arg：传给指令的参数；

         modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar，修饰符对象modifiers的值是{foo:true,bar:true};

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

oldVnode:上一个虚拟节点仅在update和componentUpdated钩子中可用。