vue中如何使用自定义指令

指令：以“v-”开头的都是指令，不同的指令实现不同的功能；

注册自定义指令：1、全局注册；2、局部注册

使用时时候需要添加v-

1. el：指令所绑定的元素；
2. binding：一个对象包含一下；
3. name：指令名，不包括v-前缀；
4. value：指令的绑定值

1、局部注册directives

在所对应的组件内注册，directives：{指令名：{钩子函数}}

<template>
  <div class="ZhiDingYiZhiLing">
    <input type="text">
    <input type="text" v-focus>
  </div>
</template>

<script>
export default {
  name: "ZhiDingYiZhiLing",
  data() {
    return {}
  },
  directives: {//自定义指令，
    focus: {
      //  会像组件一样有钩子函数
      inserted(el) {//表示被绑定的元素插入父节点的时候调用，bind/update...
        /*
        el：指令所绑定的元素
        binding:对象，包含属性：name:指令名，value：指令绑定值....
        * */
        el.focus();//获取焦点
      }
    }
  }
}
</script>

2、全局注册

在main.js中编写代码

Vue.directive(“指令名字”，“对象数据也可以是一个指令函数”)

Vue.directive("focus", {
    //  会像组件一样有钩子函数
    inserted(el) {//表示被绑定的元素插入父节点的时候调用，bind/update...
        /* el：指令所绑定的元素
         binding:对象，包含属性：name:指令名，value：指令绑定值....*/
        el.focus();//获取焦点
    }
})