Vue自定义指令和钩子函数

Vue自定义指令

应用场景

需要在页面刷新或者进入时就立即在指定位置获取鼠标焦点

自定义指令和钩子函数

定义时不需要v-但调用时需要

和行为相关的操作一般放在inserted中执行

<label>请输入搜索的关键字:<input type="text" class="form-control" v-model="keywords" v-focus></label>
Vue.directive('focus',{
     
			bind:function(){
     }//每当指令绑定到元素上的时候，会立即执行，并只执行一次
			inserted:function(el){
     
				el.focus()
			}//元素插入DOM中的时候执行
			updated:function(){
     }//当VNode更新的时候执行
		})

和样式相关的操作一般放在bind中执行

<label>请输入搜索的关键字:<input type="text" class="form-control" v-model="keywords" v-color></label>
Vue.directive('colorRed',{
     
			bind:function(el){
     
			el.style.color = 'red'//元素将获得内联样式不管这时是否插入到页面
			}//每当指令绑定到元素上的时候，会立即执行，并只执行一次
			inserted:function(){
     
			}//元素插入DOM中的时候执行
			updated:function(){
     }//当VNode更新的时候执行
		})

钩子函数的参数

第一个参数：el：指令绑定的元素，可以用来直接操作DOM
第二个参数：一个对象，包含以下属性：
name：指令名，不包括-v前缀
value：指令的绑定值。
oldValue：指令绑定的前一个值
expression：绑定值的字符串形式
arg：传给指令的参数
modifiers：一个包含修饰符的对象

binding参数使用

<label>请输入搜索的关键字:<input type="text" class="form-control" v-model="keywords" v-color="'yellow'"></label>
Vue.directive('colorRed',{
     
			bind:function(el, binding){
     
			el.style.color = binding.value//元素将获得内联样式不管这时是否插入到页面
			}//每当指令绑定到元素上的时候，会立即执行，并只执行一次
			inserted:function(){
     
			}//元素插入DOM中的时候执行
			updated:function(){
     }//当VNode更新的时候执行
		})

私有化指令

把指令放到某个Vue实例中

缩写

省略全部钩子函数等同于把代码写到了bind和update中去

Vue.directive('colorRed', function(el, binding) {
     
			el.style.color = binding.value
		})