—v-directive自定义指令

Posted 2022-04-27 tong666

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这个指令，那如果我们想让一个指令，加上之后字体就会变色，我们就可以自己注册指令：

<template>
	<div id="app">
		<button @click="onclick" v-show="ok">
			Hello
		</button>
		<div v-color>哈哈哈</div>
	</div>
</template>

<script>
	export default 
		data: () => 
			return 
				
			
		,
		methods: 
			onclick: function() 
				alert("666");
			
		,
		directives:
			‘color‘:
				bind:function(el,binding)
					el.style.color = ‘red‘;
				,
				inserted:function(el)
					el.style.display = ‘block‘;
				
			
		
	
</script>

<style>
	
</style>

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

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()一下，不过要注意注册为全局变量的话代码需要改变一下，例如上边的局部指令，改为全局的话代码应为：

directives:‘color‘，
                
				bind:function(el)
					el.style.color="red";
				
			
		        

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

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

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

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

upbind： 只调用一次，指令与元素解绑时调用。