自定义指令和自定义指令的声明周期

vue中有很多指令，在vue中，我们也可以自己定义一些指令，来方便开发，自定义指令到底有什么用？使用自定义指令我们可以在自定义指令里面放一些样式，这样当使用一些公共的样式时，就可以直接使用自定义指令来方便开发，实现一次开发，多次使用的目的。

下面我们就看一下如何自定义指令

 

<script>
	Vue.directive("自定义指令的名称",function(el,binding){
		el.style.color = "red";
		el.onclick = function(){
			binding.value++;
			el.innerHTML = binding.value;
			
		}
	});
	
	new Vue({
		el:"#app",
		data:{
			num:1
		}
	})
</script>

 

 

 

<div id="app">uuuu
			<div v-自定义指令名称="num"> {{num}} </div>
		</div>

 

其中，directive的第一个参数是自定义指令的名称，第二个参数是一个函数，函数中有两个参数，第一个参数是自定义指令所加的元素,在这里指的是

<div v-自定义指令名称="num"> {{num}} </div>,第二个参数上有vue实例中的data数据，也有自定义指令的名称,也有生命周期中的update和bind。经过以上步骤，基本上自定义指令的代码已经写完。

这里要注意的是，在directive中添加点击事件，是没有办法更改vue实例中的data属性的值，要想使页面内容在点击时发生变化，只能操作dom元素在directive中添加点击事件，是没有办法更改vue实例中的data属性的值，要想使页面内容在点击时发生变化，只能操作dom元素

<span style="color:#ff0000">
</span>

自定义指令的声明周期

 

Vue.directive("my",{
		bind:function(){
			console.log("bind");
		},
		insert:function(){
			console.log("insert");
		},
		update:function(){
			console.log("update");
		},
		conponentUpdated:function(){
			console.log("conponentUpadte");
		},
		unbind:function(){
			console.log("unbind");
		}
	})
	
	new Vue({
		el:"#app",
		data:{
			num:0
		}
	})

bind，是将自定义指令绑定到dom元素上

 

insert，是将虚拟的dom元素和指令添加到要绑定的元素上

update，是在数据更新的时候触发

conponentUpdated，数据更新后执行

unbind，解绑自定义指令，会销毁vue实例

upadte一般用放一些外部执行函数

bind中一般用来对属性或者样式来进行操作