Vue自定义指令进入页面光标自动聚焦到input框上

使用 Vue.directive可以注册全局指令，第一个参数为指令的名字,第二个参数为对象，也可以是一个指令函数。

里面有几个钩子函数

 // 钩子函数，处理指令相关的逻辑
    bind(el, binding, vnode) {
      // 指令绑定时的逻辑
    },
    inserted(el, binding, vnode) {
      // 元素插入到 DOM 时的逻辑
    },
    update(el, binding, vnode, oldVnode) {
      // 组件更新时的逻辑
    },
    unbind(el, binding, vnode) {
      // 指令解绑时的逻辑
    }

在指令的钩子函数中，通过传入的参数来获取更多信息

• el：指令所绑定的元素，可以通过操作它来改变元素的样式、属性等。
• binding：一个对象，包含了指令的信息，如 value（指令的绑定值）、modifiers（指令的修饰符）等。
• vnode：Vue 编译生成的虚拟节点。
• oldVnode：上一个虚拟节点，只在 update 钩子中可用。

下面写的进入页面光标自动聚焦到input框上

全局注册

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

局部注册

在.vue中directives属性下面书写

  directives: {
    focus: {
      inserted: function (el) {
        el.focus()
      }
    }
  }

使用

<input type="text" v-focus>