Vue自定义指令介绍

【自定义指令灵魂三问】

是什么：是程序员在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