自定义指令
为什么需要自定义指令呢?
官网有内置指令的相关用法,可以进行查阅
但是内置质量数量有限,有时候不满足我们的需求,所以需要自定义指令
如何定义指令?
//自定义focus函数,刷新页面之后光标自动移到绑定的位置
Vue.directive("focus", {
inserted: function (el) {
el.focus();
}
})
如何使用指令?
<input v-model="inv" v-focus/>
使用时,就和其他的内置指令相似,v-focus(加v,定义的时候不需要加v,使用的时候才需要)
如何使用带参数的自定义指令?
Vue.directive("color", {
inserted: function (el, binding) {
el.style.backgroundColor = binding.value.color;
//需要注意的是 bindding 是个形参 用于取值
}
}
);
带参数的自定义指令
需要注意的是:
color:指令的名称
el:代表使用该指令的元素
binding:形参,可以取到使用该指令的参数设定的值 例如
data可以在vue中设定,该值就可以通过binding获取到
局部指令
var vm = new Vue({
el:“#app”,
data:{},
mathod:{},
directives:{
color:{
bind:function (el,binding){
el.style.backgroundColor=binding.value.color;}
}
}
})
全局指令:不只是能在本组件中使用
布局指令:只能在本组件中使用