vue.js框架快速入门简明教程(七)：自定义指令

在学习vue.js过程中，我们一直都是使用到vue.js内置的核心指令，比如v-model，v-show，v-watch和v-html等以v-为前缀的指令，但vue.js也允许你注册自定义指令，这个宽容性实际是想让学习者和使用者更加灵活的使用vue.js，达到将数据的变化映射到 DOM 的行为的目的。基本语法是Vue.directive(id, definition)，id是指令ID，definition是自定义对象。

一、注册指令

在我的第六章教程vue.js框架快速入门简明教程(六)：组件中，有探讨过组件的注册分为全部组件和局部组件，同样的，指令也分为全局指令和局部指令。如果注册的是局部指令，则只能在指定的模版中使用。

1、全局注册指令

注册全局指令，可以在整个vue.js中使用该指令；

vue.directive('focus');

如果像上面那个注册指令，值写进了一个参数指令ID，该指令没有任何功能。

根据这个指令的html模版书写是这样：

<input v-focus>

根据Vue.directive(id, definition)语法，我们可以在后面添加对象，而对象里面通常放的都是函数，成为钩子函数，这个我们会在下面结合例子详细介绍，先留个悬念。

现在我们来注册一个可用的指令：

<div id="app">
    <div v-command1="70">vue.js注册指令</div>
</div>

<script>
    Vue.directive('command1',{
        bind(el,binding){
           el.style.position ='absolute'
            el.style.top=binding.value+'px';
        }
    });

    new Vue({
        el: '#app',
    })
</script>

如上例子，对象中的bind为钩子函数。

el 指令所绑定的元素，可以用来直接操作 DOM 。具体用法下面再为大家一一介绍，请耐心看完哦。

2、局部注册指令

注册局部指令，则只能在指定的模版中使用。

new Vue({
    el: '#app',
    directives:{//注册指令v-command1
        command1:{
		//指令的定义
            bind:function(el,binding){
			//聚焦元素
                el.style.position ='absolute';
                el.style.top=binding.value+'px';
            }
        }
    }
})

只有在id=app的元素中才能只用，脱离了这个区域将不能使用该指令。

二、钩子函数

经过上面指令的介绍和结合详细而又灵活的例子，应该不难发现，在使用Vue.directive(id, definition)注册指令的时候，第二个参数中的对象包含的是一个函数，这就是上面提到的钩子函数，为什么称之为钩子函数？因为钩子和回调函数有相似之处。

现在让我们来扯远点，介绍一个回调函数。

回调函数就是在模块A有需要地调用模块B中的函数b， 但是函数b又不能满足模块A的全部要求，还得调用模块A自身的函数a()来实现需求，这个函数a()其实就是回调函数。

回到正题，钩子函数是什么呢？其实可以理解为回到函数，不同之处是钩子函数会在第一时间执行，借用上图，使用钩子函数的话，函数a()会第一时间执行，执行完之后再执行其他函数，这可能也是它的命名来有，第一时间钩出，拉出，拖出所需要的。

例如：bind是钩子函数，会在第一时间调用。

Vue.directive('command1',{
    bind(el,binding){
        el.style.position ='absolute'
        el.style.top=binding.value+'px';
    }
});

在vue.js的指令定义中，指令函数提供了几个钩子函数供我们使用。

 bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
 inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
 update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
 unbind: 只调用一次， 指令与元素解绑时调用。

例如：update钩子函数

<div id="app">
    <input type="text" v-model="message">
    <div v-command1="70">{{message}}</div>
</div>

<script>
    Vue.directive('command1',{
        update(){
           alert("dsadsa")
        }
    });
    new Vue({
        el: '#app',
        data:{
            message:'钩子函数'
        }

    })
</script>

这些钩子函数至少带一个参数：

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

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

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

value: 指令的绑定值， 例如： v-my-directive=”1 + 1″, value 的值是 2。

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

expression: 绑定值的表达式或变量名。 例如 v-my-directive=”1 + 1″ ， expression 的值是 “1 + 1″。

arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”。

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

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

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

以上介绍了vue.js的自定义指令，钩子函数的使用方法和参数的使用特点。在实际开发中，可以自己定指令，使用自己定义的指令，使得我们的程序书写起来更加简单快捷。