[JavaScript知识库]vue中的自定义指令

vue中的自定义指令

在使用vue的过程中，我们使用的指令是vue默认的指令，如v-model，v-for等，我们也可以自己设置一个属于自己的指令。
问题：我们为什么需要自定义指令，vue官方文档中这样描述：Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

创建自定义指令的方式：1.局部创建。 2.全局创建

局部创建：

new directives{
	//对象形式
	mytext:{
		bind(e,d){},
		inserted(e,d){},
		update(e,d){}
	}，
	//函数形式
	myhtml(e,b){
		
	}
	
}

局部定义自定义指令，只能在局部使用，也就是只能在该vue实例挂载的el上。

在定义指令时又有两种形式去定义，对象形式和函数形式

对象形式能精准的对DOM和数据进行操作，在对象里面有三个钩子函数(类似于vue生命周期中的钩子函数)。

bind():只能调用一次，当指令和元素绑定时会执行。
inserted():指令被插入节点时执行。
update:数据更新时执行（所在模板重新解析）

以上三个钩子函数都接受两个形参，element和binding(代码中简写为e和b)，element代表是DOM元素(浏览器渲染)，不是虚拟DOM，binding是一个对象，包含许多属性，详情点击=>自定义指令中的钩子函数参数

函数形式:相对于对象形式，函数形式就比较简便了，只需要接受两个形参就可以。

利用这两个形参，我们可以对指令进行很多操作，例如自定义一个将数据放大十倍的指令

directives{
//函数形式
	big(e,b){
		e.innerText = b.value * 10
	}
}

在页面中使用指令即可，假设n在data中定义为1，则p中显示的值为10.

<p v-big='n'></p>

全局创建：

Vue..directive('mydirection',(e,b)=>{
        e.innerText = b.value/10
    })

全局创建自定义指令，可以在多个vue实例中使用，基本使用跟局部创建的自定义指令类似。