自定义指令

全局

//定义一个input自动获取焦点
app.directive('focus',{
    mounted(el,binding,vnode,prevVnode){
    //el指令绑定到的元素
    //binding中 `value`：传递给指令的值 `oldValue`：之前的值
    //vnode  虚拟DOM
    //prevVnode 旧的虚拟DOM
    el.focus();
    }
})

//简化
app.directive('focus', (el, binding) => { 
    // 这会在 `mounted` 和 `updated` 时都调用 
    el.focus();
})

局部

//模拟 v-show
let app = Vue.createApp({
      //挂载局部指令
      directives: {
        mshow: {
          //负责初始化效果
          mounted(el, binding) {
            console.log(el, binding);
            let disp = binding.value ? "block" : "none";
            el.style.display = disp;
          },
          //负责根据新数据更新效果
          updated(el, binding) {
            ...
          },
        },
      },
    });