自定义指令的说明和注册

自定义指令说明

Vue3

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 v-xxx

注意，代码复用和抽象的主要形式是组件。

然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

自定义指令的注册分为：局部注册，全局注册

自定义指令 - 局部注册

例如需求: 当页面加载时，让元素将获得焦点 , (autofocus 在 safari 浏览器有兼容性)

语法：directives：{指令名称，配置对象}

<template>
  <div>
    <h3>自定义指令</h3>
    <input ref="inp" type="text" v-focus>
  </div>
</template>

<script>
export default {
  directives: {
    // 自定义一个局部指令
    focus: {
      inserted (el) {
        el.focus()
      }
    }
  }
}
</script>

给你解释一下哈~

在export default里面有个配置项是directives，这是个配置对象，是个对象，意味着可以写多个指令（key，value）。focus是（key）指令名称，（value是个对象），{ }配置对象里有个必不可少的方法是inserted，inserted里有个形参el，el可以帮助我们拿到这个v-focus指令使用的对象，打印el，输出的是 <input type="text">然后调用方法el.focus()

自定义指令 - 全局注册

就是在所有的vue'文件中都可以使用

语法：Vue.directive(指令名称，配置对象)

// 注册全局自定义指令
Vue.directive('focus', {
  inserted (el) {
    el.focus()
  }
})

再解释一下：

在main.js中，Vue有个directive方法，第一个参数（'focus'）是注册的指令的名称，后面{ }是配置对象，后面配置对象里的和局部注册一样

自定义指令 - 指令的值

在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值

需求: v-color="color" 给对应的颜色, 就能改对应的字体颜色

<div v-color="colorStr">我是内容</div>

data(){
return  {
colorStr:'red'
}
}

实现

directives: {
  // 自定义一个局部指令
  color: {
    // 指令所在的元素渲染的时候
    inserted (el, {value}) {
      el.style.color = value
    },
    // update指令的值改变时触发, binding.value指令的值修改触发
    update (el, binding) {
      el.style.color = binding.value
    }
  }
}

第二个形参binding，绑定的是指令传递过来的一些数据

错误演示：当我们修改了colorStr数据的时候，文字颜色并不发生改变

因为：指令后面跟的是对象，directives这个方法在指令初次使用的时候被调用一次，后面数据发生变化，也不会触发directives这个方法。

还有一个update（）这个方法，这个方法的形参和directives一样，不一样的是，updata方法的是当数据发生改变的时候触发。所以 el.style.color = binding.value写在update里面哦~