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

<script>
export default {
  directives: {
    focus: { // 自定义指令的名字
    // 下面每个方法都是一个钩子函数
    // el代表 当前绑定的dom元素
      bind: (el, binding) => {
        el.value = 56 // 可以赋值 不能使用方法
        console.log('bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。')
      },
      inserted: (el, binding) => {
        el.focus() // 可以使用方法
        console.log('inserted:被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。')
      },
      update: (el, binding) => {
        console.log('update:被绑定元素所在模板更新时调用,模板还没更新完成')
      },
      componentUpdated: (el, binding) => {
        console.log('componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。')
      },
      unbind: (el, binding) => {
        console.log('unbind:只调用一次，指令与元素解绑时调用。')
      }
    }
  }
}
</script>

全局中注册

 Vue.directive('focus', {
      inserted: function (el, bind) {
        el.focus()
        console.log(el, bind)
      }
    })

具有高端b格写法(利用插件的形式)

export default {
  install (Vue) {
    Vue.directive('focus', {
      inserted: function (el, bind) {
        el.focus()
        console.log(el, bind)
      }
    })
  }
}

//main.js
import directive from './views/directive'
Vue.use(directive)

Vue3.0

import { createApp } from 'vue'
const app = createApp({})

// 注册
app.directive('my-directive', {
  // 指令是具有一组生命周期的钩子：
  // 在绑定元素的 attribute 或事件监听器被应用之前调用
  created (el, binding) {},
  // 在绑定元素的父组件挂载之前调用
  beforeMount (el, binding) {},
  // 绑定元素的父组件被挂载时调用
  mounted (el, binding) {},
  // 在包含组件的 VNode 更新之前调用
  beforeUpdate (el, binding) {},
  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated (el, binding) {},
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount (el, binding) {},
  // 卸载绑定元素的父组件时调用
  unmounted (el, binding) {}
})

// 注册 (功能指令)
app.directive('my-directive', () => {
  // 这将被作为 `mounted` 和 `updated` 调用
})

小坑

vue3.0中我们通过vue-cli生成的脚手架中的main.js是这么写的

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)

createApp(App).use(store).use(router).use(components).mount('#app')

注册全局指令

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App) //cv过来的代码  第一次定义createApp(App)

app.directive('blue', {

  mounted (el, binding) {

    console.log(el, binding)

  }

})

createApp(App).use(store).use(router).use(components).mount('#app') //错误代码

上面又是一个createApp(App) 相当于后面的给前面的替换掉了也就相当于没有定义自定义指令修改记得改成app

app.use(store).use(router).use(components).mount('#app')

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.directive('blue', {
  mounted (el, binding) {
    console.log(el, binding)
  }
})
app.use(store).mount('#app')

具有高端b格写法(利用插件的形式)

directive.js

export default {
  install (app) {
    app.directive('test', {
      mounted (el, binding) {
        console.log(el, binding)
      }
    })
  }
}

main.js

import directive from '@/directive/index'
const app = createApp(App)
app.use(directive)

dom使用

<div v-test></div>

自定义指令中的参数

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

常用

① el 获取dom进行操作

② binding中的value属性通过binding.value拿到自定义指令中传过来的值 v-test="1" ===binding.value

小demo 把当前元素设为绝对定位并移动指定的top值

directive/index.js

export default {
  install (app) {
    app.directive('top', {
      mounted (el, binding) {
        console.log(el, binding)
        el.style.position = 'absolute'
        el.style.top = binding.value + 'px'
      }
    })
  }
}

main.js

import directive from '@/directive/index'
const app = createApp(App)
app.use(directive)

dom

<div v-top='50' style="width:100px;height:100px;background:pink"></div>

vue2.0和vue3.0中的区别

vue2.0中和vue3.0中自定义指令的原理是一致的，只是生命周期钩子函数不同

vue2中绑定的钩子函数为

bind - 指令绑定到元素后发生。只发生一次。
inserted - 元素插入父 DOM 后发生。
update - 当元素更新，但子元素尚未更新时，将调用此钩子。
componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。
unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。

vue3.0

将钩子函数的命名与生命周期的钩子函数命名相一致

bind → beforeMount
inserted → mounted
beforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。
componentUpdated → updated
beforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。
unbind -> unmounted

以上是关于vue2.0和vue3.0中自定义指令（directive）的区别的主要内容，如果未能解决你的问题，请参考以下文章

vue3.0 如何自定义指令

vue中自定义指令

Vue中自定义指令的使用方法！

同一电脑上安装且使用vue2.0和vue3.0版本

vue2.0和vue3.0中的区别