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>

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

文章图片
如上例子,对象中的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()其实就是回调函数。
vue.js框架快速入门简明教程(七)(自定义指令)

文章图片
回到正题,钩子函数是什么呢?其实可以理解为回到函数,不同之处是钩子函数会在第一时间执行,借用上图,使用钩子函数的话,函数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>

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

文章图片
这些钩子函数至少带一个参数:
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的自定义指令,钩子函数的使用方法和参数的使用特点。在实际开发中,可以自己定指令,使用自己定义的指令,使得我们的程序书写起来更加简单快捷。

    推荐阅读