【自定义指令灵魂三问】
是什么:是程序员在vue中自己定义的指令,用在标签上
为什么:为了获取标签,扩展额外的功能(vue自带的指令不能满足我们的需求时用)
怎么用:全局使用 和 局部使用
1.全局自定义指令
代码位置:main.js文件中
语法结构:
Vue.directive("指令名",{
"inserted" (el){
//对el进行的操作
}
})
2.局部自定义指令
代码位置: 任意组件中使用,与data同级
语法结构:
directives:{
"自定义指令名字":{
inserted(el){
//对el进行操作
}
}
}
案例:
提问:如何在页面加载的时候自动让组件聚焦
没学自定义指令前:
mounted(){
document.querySelector('#ipt').focus()
}
学了自定义指令后:
<template>
<div>
<input v-focus type="text" />
</div>
</template>
<script>
export default {
directives:{ //局部自定义指令,用于当前组件
focus:{
inserted(el){ //inserted是一个钩子函数
console.log(el) //el是当前指令绑定的元素对象
el.focus()
}
}
}
}
</script>
全局自定义指令与局部自定义指令差不多,最大的区别就是在main.js中定义后,可以全局调用
小结:
1. 自定义指令是我们自己写的一个指令,可以写在当前组件或写在入口文件中(或者另外封装到组件中)
2. 自定义指令一般是当原有指令满足不了自己的需求时使用
3. 自定义指令的时候会创建一个钩子函数 inserted