Vue.directive 自定义指令

Vue.directive() 自定义指令

在 Vue 中，我们知道有很多内部指令供我们使用。当然，我们也可以定义一些自己的指令，在必要的时候使用。

1.实列：
我们写一个自定义指令，让我们的文字改变颜色。

• 单击按钮，让数字增加这个简单的小例子。
• 然后改变数字的颜色。
  html 代码：

 <div id="app">
        <p  v-changecolor='color'>{{count}}</p>
        <input  type="button" value="添加" v-on:click="add">
        <input  type="button" value="清零" v-on:click="res">
    </div>

js 代码：

		 Vue.directive('changecolor' ,  function(el , binding , vnoe){
		            // el:指绑定的元素 , 可以用来直接操作DOMc
		            console.log(el) ; // 绑定的元素
		            // binding : 一个对象 ， 包含指令的很多信息(包含着vue构造器中 data 的数据 )
		            console.log(binding)
		            console.log(binding.name) ; //自定义指令的名字  v-changecolor
		            console.log(binding.value) ; //指令注册在构造器中的值
		            el.style = 'color:' + binding.value ; 
		        }) 
		const app = new Vue({
		            el:'#app', 
		            data:{
		                count:5, 
		                color:'red',
		            } ,
		            methods:{
		                add:function(){
		                    this.count++ ; 
		                } ,
		                res:function(){
		                    this.count = 0 ; 
		                }
		            }

注意，我们在构造器的外面，定义一个全局的指令，通过 Vue.directive()

//定义全局的指令
Vue.directive('指令名' , function(el , binding , vnode){
	//el.style = 'color:' + binding.value; 
	el.style.color = binding.value ; 
})

2.参数 ：

• el : 指令所绑定的元素，可以用来直接操作DOM
• binding : 一个对象，包含指令的很多信息。
• vnode: Vue编译生成的虚拟节点。

	el:指绑定的元素 , 可以用来直接操作DOMc
   	console.log(el) ; // 绑定的元素
   	binding : //一个对象包含指令的很多信息(包含着vue构造器中 data 的数据 )
    console.log(binding)
    console.log(binding.name) ; //自定义指令的名字  v-changecolor
    console.log(binding.value) ; //指令注册在构造器中的值

3.自定义指令的生命周期

• bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
• inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）
• update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
• componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
• unbind：只调用一次，指令与元素解绑时调用。

			bind:function(){//被绑定
			     console.log('1 - bind');
			},
			inserted:function(){//绑定到节点
			      console.log('2 - inserted');
			},
			update:function(){//组件更新
			      console.log('3 - update');
			},
			componentUpdated:function(){//组件更新完成
			      console.log('4 - componentUpdated');
			},
			unbind:function(){//解绑
			      console.log('1 - bind');
			}

注意 自定义指令的命名规则为驼峰式命名。最好自定义指令的名称用小写。