vue 自定义指令

vue指令包括 v-model  v-if  v-for v-show 等Vue自带的指令 ，但是实际开发中有一些需求这些指令不能满足，换一种方式又能实现，但是会比较频繁的使用该方法，我们就可以使用自定义指令来方便快捷的实现。

Vue2自定义指令

vue2的自定义指令有如下几个生命周期

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 

生命周期钩子接受一下几个参数

• el：指令所绑定的元素，可以用来直接操作 DOM。
• binding：一个对象，包含一些信息
• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

全局注册（全局注册是直接在man.js文件中挂在到Vue实例上，全局都可以使用）

直接描述对象注册

Vue.directive('test3',{
  inserted(el,binding){
    console.log(binding.value) //打印出指令传递的参数
    el.innerText = '我绑定了test3 全局指令' //修改标签内容
  },
})

文件引入形式注册

export default {
    inserted(el,binding){
        console.log(binding.value)
        el.innerText = '我绑定了test4 指令' //修改标签内容
    },
}

import test4 from "./directive/test4";
Vue.directive('test4',test4)

局部注册 （在组建内注册，仅限该组建内使用）

export default {
  name: 'Home',
  directives:{
    test2:{
      // 指令的所在元素被插入页面时 执行该钩子
      inserted(el,binding){
        console.log(binding.value)
        el.innerText = '我绑定了test2 指令' //修改标签内容
      },
    },
    // 获取输入框焦点
    focus:{
      inserted(el,binding){
        console.log(binding.value)
        el.focus()  //初始化获取输入框焦点
      },
      update(el){
        el.focus()
      }
    }

  },
}

使用

<!--        传递一个字符串-->
        <button v-test2="'HAHAH'">789</button>
<!--        传递一个对象-->
        <button v-test3="{aa:'132'}">546</button>
<!--        传递一个对象的属性-->
        <button v-test4="man.age">546</button>

效果

Vue3自定义指令

钩子函数 ： 同组建生命周期一样  差不多那几个

钩子参数：同vue2一样还是那几个 

局部注册

<script setup>
// 在模板中启用 v-focus
const vFocus = {

// 或事件监听器应用前调用
    created(el, binding, vnode, prevVnode) {},

// 在元素被插入到 DOM 前调用
    beforeMount(el, binding, vnode, prevVnode) {},

// 在绑定元素的父组件 // 及他自己的所有子节点都挂载完成后调用
    mounted(el, binding, vnode, prevVnode) {
        el.focus() //是输入框获得焦点
},

// 绑定元素的父组件更新前调用
    beforeUpdate(el, binding, vnode, prevVnode) {},

// 在绑定元素的父组件 // 及他自己的所有子节点都更新后调用
    updated(el, binding, vnode, prevVnode) {},

// 绑定元素的父组件卸载前调用
    beforeUnmount(el, binding, vnode, prevVnode) {},

// 绑定元素的父组件卸载后调用
    unmounted(el, binding, vnode, prevVnode) {}

}

</script>

<template>
  <input v-focus />
</template>

在 <script setup> 中，任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令。在上面的例子中，vFocus 即可以在模板中以 v-focus 的形式使用。

全局注册

// 使 v-focus 在所有组件中都可用
createApp(App).directive('test1',{
    mounted(el){
        el.focus()
    }
}).use(router).mount('#app')

使用方式也是同Vue2相同