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
})