第二章—v-directive自定义指令

v-directive自定义构造器

介绍:

注册或获取全局指令。

 

平时大家在用vue开发项目的时候大多会用到一些官方指令,例如:

v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text...

但这些指令只能完成一部分功能,大部分功能是需要我们自己来书写的,所以我们就会用到自定义指令来帮助我们注册自己想要的功能。

自定义指令分为两种,一种是局部变量,一种是全局变量,我们先来看看局部变量:

 

当我们想实现这样一个功能,点击弹框,我们会用v-on:click这个指令,那如果我们想让一个指令,加上之后字体就会变色,我们就可以自己注册指令:






  将以上代码打开后,我们就可以发现 ‘哈哈哈’ 三个字已经变成了红色,所以注册一个局部自定义指令的方法我们可以得到:

directives:{
			'color':{//给字体设置颜色
				bind:function(el){
					el.style.color="red";
				}
			}
		}

  bind:function(el,binding,vnode)这里面有三个参数,他们分别代表的意思是:

el:你要调用的该元素,打印一下会直接打印出DOM节点

binding:一个对象,它包含了:

  1. name:指令名,不包括 v- 前缀
  2. value: 指令绑定的值,例如:v-count="1 + 1"中,绑定值为 2
  3. expression: 字符串形式的指令表达式。例如:v-count="1 + 1"中,表达式 为 1 + 1
  4. oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  5. arg:` 传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 “foo”
  6. modifiers: 一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为{ foo: true, bar: true }

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

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

 

 

然后如果我们想将一个指令注册为全局指令的话,我们可以将代码写到main.js里面,或者新建一个index.js文件,然后在main.js里面import引入,再use()一下,不过要注意注册为全局变量的话代码需要改变一下,例如上边的局部指令,改为全局的话代码应为:

Vue.directive('none',{
	bind:function(el,binding,vnode){
		el.style.display = 'none';
	}
})

  

  然后自定义指令还有个生命周期:

inserted : 表示元素 插入到DOM中的时候,会执行 inserted 函数,触发一次。(例如:自动获取焦点)。

updated : 当VNode 更新的时候,会执行 updated 函数,可能会触发多次。

componentUpdated : 指令所在组件的VNode 及其子 VNode 全部更新后调用。

upbind: 只调用一次,指令与元素解绑时调用。

转载于:https://www.cnblogs.com/tong666/p/11216487.html

你可能感兴趣的:(第二章—v-directive自定义指令)