Vue自定义指令详解

在 AngularJs 中，它的指令使用 directive ( name,factor_function)来实现：

rush:js;"> angular.module( 'myapp',[]) .directive (myDirective,function (){ return{ template : '',restrict: '',replace: '',........ } })

除了内置指令,Vue.js 也允许组件自定义指令。 + 自定义指令提供一种机制将数据的变化映射为 DOM 行为 + Vue.js 用 directive ( id,deFinition) 方法注册一个全局的自定义指令 + 自定义的指令接受两个参数： 指令 ID 与定义对象 + 也可以用组件的 directives 注册一个局部自定义指令 （此方法相当于 AngularJs restrict 属性为A）

1. 钩子函数

+ 钩子函数是 Windows 消息处理机制的一部分 + 通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。 + 钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。 + Windows 的钩子函数可以认为是 Windows 的主要特性之一。利用它们，您可以捕捉您自己进程或其它进程发生的事件。 + 通过“钩挂”，您可以给 Windows 一个处理或过滤事件的回调函数，该函数也叫做“钩子函数”，当每次发生您感兴趣的事件时，WINDOWS 都将调用该函数。

函数： compile 和 link,其中编译函数主要负责将作用域和 DOM 进行链接；链接函数用来创建可以操作 DOM 的指令

函数当做 link 函数，而忽略 link 选项本身 Vue.js 同样也提供了几个钩子函数都是可选的，相互之间没有制约关系

钩子函数：

主要负责将作用域和 DOM 进行链接；链接函数用来创建可以操作 DOM 的指令

+ bind — 只调用一次，在指令第一次绑定到元素上的时候调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作

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

update — 在 bind 之后立即以初始值为参数第一次调用，之后每当被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新，参数为新值与旧值。

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

unbind — 只调用一次，在指令从元素上解绑时调用

rush:js;"> Vue.directive('my-directive',{ bind: function(){ //做绑定的准备工作 //比如添加事件监听器，或是其他只需要执行一次的复杂操作 },inserted: function(){ //... },update: function(){ //根据获得的新值执行对应的更新 //对于初始值也会调用一次 },componentUpdated: function(){ //... },unbind: function(){ //做清理操作 //比如移除bind时绑定的事件监听器 } })

在注册之后，便可以在 Vue.js 模板中这样写（记得添加前缀 v-）:

rush:xhtml;">

当只需要 update 函数时，可以传入函数替代定义对象：

rush:js;"> Vue.directive( 'my-directive',function (value) { // 这个函数作用 update() })

2. 指令实例属性

所有钩子函数都将被赋值到实际的指令对象中，在钩子内 this 指向这个指令对象。 这个对象暴露了一些有用的属性： 钩子函数的参数：

el

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

binding

— 一个对象，包含以下属性： name — 指令的名字，不包含前缀 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 }。 vm — 拥有该指令上下文 Viemmodel vnode — Vue 编译生成的虚拟节点。

oldVnode:

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

desciiptor

— 一个对象，包含指令的解析结果

注意：我们应当将这些属性视为只读，不要修改它们，我们也可以给指令对象添加自定义属性，但是注意不要覆盖已有的内部属性

下面将讲解一个简单的例子，当页面加载时，input输入框将自动聚焦。 代码如下：

rush:js;"> //注册一个全局自定义指令v-focus // 当绑定元素插入到DOM中 // 聚焦元素

/div>

Vue.directive('focus',{
inserted: function (el) {
el.focus() }
});

var app = new Vue({
el: '#app'
});

下面将讲解一个使用钩子函数参数的例子，将元素的字体色设置为 #fff，将背景色设置为传入指令的参数 red，并将指令名指令绑定值，指令绑定值的表达式，传入指令的参数显示在中。

代码如下：

rush:xhtml;">

3. 对象字面量

+ 如果指令需要多个值，则可以传入一个 javascript 对象字面量 + 指令可以使用任意合法的 javascript 表达式

rush:xhtml;">

Vue.directive('demoDirective',function(el,vnode){
console.log(binding.value.color);
console.log(binding.value.text);
});

var demo = new Vue({
el: '#app'
})

4. 字面指令

+ 当指令使用了字面修饰符时，它的值将按普通字符串处理并传递给 update 方法 + update 方法将只调用一次，因为普通字符串不能影响数据变化 + 若在创建自定义指令时，设置 inListerral: true 则特性值将被视作字符串，并将赋值给该指令的expression，字面指令不会建立数据监视。

Vue.directive('myEx',vnode){
console.log(binding.value.literal)
})

var hah = new Vue({
el: '#isExample'
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。