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框架快速入门简明教程(七)（自定义指令）】以上介绍了vue.js的自定义指令，钩子函数的使用方法和参数的使用特点。在实际开发中，可以自己定指令，使用自己定义的指令，使得我们的程序书写起来更加简单快捷。