Vue3自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子

自定义获取焦点指令

局部指令

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

export default ({
  directives:{
      focus:{
          mounted(el,bindings,vnode,prevode){
              console.log(el)
              el.focus();
          },
      }
    },
})

全局指令

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
app.directives:{
      focus:{
          mounted(el,bindings,vnode,prevode){
              console.log(el)
              el.focus();
          },
      }
    },

指令的生命周期