详解vue如何使用自定义指令

<template>
 <input id="IamInput" v-focus />
</template>
<script setup>
const vFocus = {
  mounted: (el:any) => {
    console.log('el是啥子哦',el);   
    el.focus()
    }
}
//当然也可以不写成箭头函数
const vFocus = {
  mounted: function (el: any) {
    console.log('el是啥子哦', el);
    el.focus();
  },
};
</script>

const vFocus = {
  mounted: function (el: any) {
    console.log('el是啥子哦', el);
    el.focus();
  },
};
app.directive('focus',vFocus)

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

<template>
    <input id="IamInput" v-focus="num" />
    <el-button @click="num++">点击使得num++</el-button>
</template>
<script lang="ts" setup>
const num=ref(1)
const vFocus = {
  mounted(el: any,binding:any, vnode:any, prevVnode:any) {
    el.value=binding.value //el是DOM元素，el.value就是input框的值，我们在元素挂载时设置一个默认值为1
 },
 updated (el: any,binding:any, vnode:any, prevVnode:any) {
// 我们在元素更新时设置乘以2倍的操作
console.log('binding',binding);
el.value=binding.value//更新input框的内容
 },
};
 //在main.ts中全局挂载
 app.directive('focus',vFocus)
 </script>