在vue中有很多指令,例如:v-on v-bind v-model v-for v-if等等,通过这些指令,可能也能最终达到我们需要的效果,为何要弄个自定义指令呢?
通过使用自定义指令,我们会发现它对dom的操作更加方便、更灵活、可复用(全局)。接下来就详细介绍一下自定义指令的使用。
一、自定义指令的分类:
1 全局自定义指令:
顾明私有,全局的元素都可以使用这个指令,通过一个小栗子我们简单了解一下怎么创建一个全局的自定义指令。
功能需求: 通过自定义指令实现对复选下拉框的某一个元素默认选中效果
// 全局指令
//自定义指令名称sel
//el参数可以获取当前的dom元素
//inserted中进行指令的定义
Vue.directive('sel',{
inserted(el,pos){
// 实现对第二个元素的默认选中
el.children[1].selected = true;
}
})
//下拉框
// 通过v-sel调用自定义的全局指令v-sel
<select name="" id="fruits" multiple v-sel>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="橘子">橘子</option>
</select>
效果图:可以发现香蕉默认是选中状态
到此,一个简单的自定义指令就完成了(从实现到调用)。由于是全局的,谁(所有的dom元素)都可以调用,如果在实际应用中不能满足业务需求,那就创建局部的呗,每个组件独享自定义的指令。
2 局部自定义指令
在组件中进行定义,通过directives属性,可以同时自定义多个指令,而且可以同时引入多个指令,太爽了!!!来看看如何实现的。
//创建一个组件,在组件中通过directives来创建两个自定义指令
Vue.component('sss',{
// 模板 可以看到引用了 v-focus v-def两个指令
template:`
<input type='text' v-focus v-def>
`,
directives:{
//初始化聚焦
focus:{
inserted(el,pos){
el.focus()
}
},
// 默认的value
def:{
inserted(el){
el.value='aaaaaa';
}
}
}
})
//引用组件
<sss></sss>
看效果:初始化聚焦 默认的value效果都出来了,这样一来操作dom就简单多了
二 、自定义指令中传参
通过设置inserted的第二个参数可以接收传过来的值
// 传值
<input type='text' v-focus="{username:'sh',age:23}" v-def>
// 接收
focus:{
inserted(el,pos){
// 打印结果 : {username: "sh", age: 23}
console.log(pos.value)
el.focus()
}
}
对pos参数进行打印,发现可以从value进行取值
pos参数各个属性的说明(引自vue官网)
binding:一个对象,包含以下属性:
name:指令名,不包括 v- 前缀。
value:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。
oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression:字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。
arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 “foo”。
modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
以上就是vue自定义指令的简单使用,如果疏漏,请留言指出。