vue2和vu3的自定义指令

简介

在 vue 中提供了一些对于页面和数据更为方便的输出，这些操作就叫做指令，以 v-xxx 表示，比如 html 页面中的属性 <div v-xxx ></div>。自定义指令很大程度提高了开发效率，提高了工程化水平，一定要认真学习

内置指令

v-bind：用于将数据绑定到HTML元素的属性上。可以使用简写形式的冒号(:)来表示。例如，v-bind:href="url"可以将url的值绑定到元素的href属性上。

v-if和v-else：用于根据条件来渲染或销毁元素。v-if指令根据表达式的值来判断是否渲染元素，而v-else指令则表示与v-if相反的条件。

v-for：用于循环渲染列表数据。可以使用v-for指令来遍历数组或对象，并将每个元素渲染为对应的HTML元素。

v-on：用于监听DOM事件并触发相应的方法。可以使用简写形式的@符号来表示。例如，v-on:click="handleClick"可以在点击事件发生时调用handleClick方法。

v-model：用于实现双向数据绑定。可以将表单元素的值与Vue实例中的数据进行关联，实现数据的自动同步。

v-show：用于根据条件来显示或隐藏元素。与v-if不同的是，v-show只是通过修改元素的display属性来控制显示与隐藏，而不是直接添加或删除元素。

自定义指令

顾名思义，自己定义自定义指令的方法，实现我们需要的指令功能

自定义指令钩子

vue2自定义指令钩子

bind()：当指令绑定在 HTML 元素上时触发

inserted()：当指令绑定的元素插入到父节点中的时候触发

update()：当指令绑定的元素状态/样式、内容(这里指元素绑定的 vue 数据) 发生改变时触发

componentUpdated()：当 update() 执行完毕之后触发

unbind()：当指令绑定的元素从 dom 中删除时触发

vue3自定义指令钩子

created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。

beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。

mounted：在绑定元素的父组件被挂载后调用，大部分自定义指令都写在这里。

beforeUpdate：在更新包含组件的 VNode 之前调用。

updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。

beforeUnmount：在卸载绑定元素的父组件之前调用

unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

vue2 ====> vue3 自定义指令声明周期钩子函数发生的变化

• bind ====> beforeMounted
• inserted ====> mounted
• update 被移除
• componentUpdated ====> updated
• unbind ====> unmounted

自定义指令参数

created(el, binding, vnode, prevNode) {}

el：指令绑定到的元素。这可以用于直接操作 DOM。
binding：一个对象，包含以下属性：

    value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
    oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
    arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
    modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
    dir：指令的定义对象。
    instance：使用该指令的组件实例。

vnode：代表绑定元素的底层 VNode。
prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

vue3 + ts 实践自定义指令

vue3局部自定义指令

在<script setup>定义组件内的指令，任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令

<script lang="ts" setup>
    const vFocus = {
        //  在模版中启用 v-focus
        mounted(el:any) {
            console.log(el); // <input type="text">
            el.focus()
        },
    };
</script>
<template>
<div>
    <h1>局部自定义指令</h1>
    <p>页面载入时,input元素自动获取焦点:</p>
    <input type="text" v-focus>
</div>
</template>

效果:

vue3全局自定义指令

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)

// 注册全局自定义指令
app.directive('focus', {
  // 在元素插入到 DOM 时触发
  mounted(el, binding) {
    // el 是指令所绑定的元素，binding 是一个对象，包含指令的信息
    // 在这里可以执行一些操作
   el.focus()
   console.log(el,binding);
   
  },
});

app.use(createPinia())
app.use(router)
app.mount('#app')

<template>
    <h1>全局自定义组件</h1>
    <input type="text" v-focus>
</template>

效果:

vue2局部自定义指令

<script>
  export default{
  setup() {},
  directives: {
    // 指令名
    focus: {
      // 生命周期
      mounted(el) {
        // 处理DOM的逻辑
        el.focus()
      },
    }
  }
}
</script>
<template>
    <h1>v2局部自定义指令</h1>
    <input type="text" v-focus>
</template>