Vue自定义指令

Vue有很多内置的指令，比如说v-on，v-model，v-clock等等，每一个指令会完成一定的功能，但是这些内置的指令总会有些局限性，要是能够自定义指令就好了--

Vue的自定义指令分类：

全局指令和局部指令

Vue指令的定义和用法（以全局指令为例）：

1.语法：Vue.directive(指令ID，定义对象)，在这里“指令ID”就是指令的名字，“定义对象”就是一个对象，包含有该指令的钩子函数，例如：

Vue.directive("commd",{
			// 当该指令第一次绑定到元素上时调用，只调用一次，可以用来执行初始化操作(简言之，指令绑定到元素)
			bind:function(){//常用！！！
				alert("当该指令第一次绑定到元素上时调用，只调用一次，可以用来执行初始化操作")
			},
			//被绑定有自定义指令的元素插入到DOM中时调用，在这里是插入到了#container中（简言之，元素插入到DOM元素中）
			inserted:function(){
				alert("被绑定有自定义指令的元素插入到DOM（父节点）中时调用，在这里是插入到了#container中")
			},
			// 当被绑定的元素所在模板更新时调用
			update:function(){
				alert("当被绑定的元素所在模板更新时调用")
			},
			// 当被绑定的元素所在模板完成一次更新时调用（模板更新后调用）
			componentUpdated:function(){
				alert("当被绑定的元素所在模板完成一次更新时调用（模板更新后调用）")
			},
			// 当指令和元素解绑的时候调用，只执行一次(因为毕竟解绑一次就完成了嘛！)
			unbind:function(){
				alert("当指令和元素解绑的时候调用，只执行一次(因为毕竟解绑一次就完成了嘛！)")
			}
		})

这里的bind，inserted，update等等都是该指令的钩子函数，所谓的 钩子函数就是在该指令不同的阶段执行不同的方法，一般常用的钩子函数是bind和update，最常用的是bind；

钩子函数的参数:

因为比较常用的钩子函数是bind阶段的，所以就以该阶段的钩子函数为例：

Vue.directive("hello",{
			bind:function(el,binding){
				alert("绑定好了！！");
				console.log(el)//这里的el指的就是当前指令绑定的DOM元素;
				console.log(binding)//返回的是一个对象，包含有以下属性：
				// 1.name：指令名；这里是hello
				// 2.value：指令的绑定值，（当前指令绑定的值,在这里绑定的值是字符串 "是的"，已经解析过的），
				// 3.expression：指令绑定值的字符串形式，在这里是字符串："isTRue"
				// 4.arg:传递给指令的参数,传递参数的方法----v-指令：参数，在这里的参数是“ererer”，
				//5.modifiers：一个对象，包含当前的指令的修饰符,给指令添加修饰符的方法----v-指令.修饰符一.修饰符二....
			}
		})

var app  = new Vue({
			el:"#container",
			data:{
				greeting:"热爱编程...",
				isTRue:"是的"
			},
			// 执行该方法时，由于改变了greeting，所以模板也发生了改变，执行update钩子函数
			methods:{
				changeData:function(){
					this.greeting = "培养自己对编程的热爱";
					this.isTRue  = "不是的！"
				}
			}
		})

HTML部分

<!-- 钩子函数的参数 -->
		<h3 v-hello:ererer.huhu.hehe = "isTRue">{{greeting}}</h3>
		<!--在这里该指令的参数就是字符串ererer,修饰符就是字符串"huhu"和"hehe",可以有多个修饰符 -->

以上是怎么定义全局指令的，那么该指令是怎么用的呢？如下：

<h3 v-commd>{{greeting}}</h3>
		<!-- 注意：在元素中添加自定义指令时必须加前缀v- -->

自定义指令和内置指令一样都是需要在前面加前缀“v-”才起作用；

Vue全局指令的简化写法：

1.语法：Vue.directive("指令ID"，callback)，在这里的callback函数会在指令bind和update的时候执行和调用，例如：

Vue.directive("lala",function(){
			alert("我被弹出来了！")
		})

这里的function函数只有在bind和update阶段的时候会执行；

局部自定义指令：

语法:写在Vue实例中的directives选项中：

var app  = new Vue({
			el:"#container",
			data:{
				greeting:"热爱编程...",
				isTRue:"是的"
			},
			// 执行该方法时，由于改变了greeting，所以模板也发生了改变，执行update钩子函数
			methods:{
				changeData:function(){
					this.greeting = "培养自己对编程的热爱";
					this.isTRue  = "不是的！"
				}
			},
			directives:{//自定义局部指令
				//在这里fool就是指令ID：
				fool:{
					//各种钩子函数（可以有一个也可以有多个）
					//bind：function（）{}，
					//inserted：function（）{}，
					//....
					
				}
			}
		})