vue 自定义指令

• vue 自定义指令
  • 分类
    • 全局指令 Vue.directive()
    • 局部指令 directives
  • vue 自定义指令 钩子函数
• vue3 自定义指令
  • 分类
    • 全局指令 app.directive()
    • 局部指令 directives
  • vue3 自定义指令 钩子函数

vue 自定义指令

除了Vue提供的内置指令之外，你还可以自定义指令来扩展Vue的行为。

自定义指令可以让你 在DOM元素上添加自定义行为或样式，并且可以重复使用这些行为和样式，从而提高代码的复用性。

Vue中自定义指令有两种方式：全局指令和局部指令。

分类

全局指令 Vue.directive()

局部指令 directives

1. 全局指令

   全局指令是注册在Vue构造函数上的指令，可以在整个应用程序的任何实例中使用。

   你可以使用Vue.directive()方法来创建全局指令，该方法接受两个参数：指令名称 和 指令选项对象 。

   例如，下面是一个自定义的v-focus指令，在元素插入到DOM时将焦点设置在该元素上：

   Vue.directive('focus', {
     inserted: function (el) {
       el.focus()
     }
   })
   1
   2
   3
   4
   5

   然后在模板中可以像下面这样使用v-focus指令：

   <input v-focus>
   1

   注意，在全局指令中，指令名称需要以v-开头 。

2. 局部指令

   局部指令是在组件中注册的指令，只能在该组件及其子组件中使用。

   你可以在组件的选项对象中使用directives属性来注册局部指令。

   例如，下面是一个组件的局部指令v-scroll，当用户向下滚动时触发该指令：

   export default {
     directives: {
       scroll: {
         inserted: function (el, binding) {
           window.addEventListener('scroll', binding.value)
         },
         unbind: function (el, binding) {
           window.removeEventListener('scroll', binding.value)
         }
       }
     },
     // ...
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

   然后在组件的模板中，可以像下面这样使用v-scroll指令：

   <div v-scroll="handleScroll">
     
   div>
   1
   2
   3

   注意，在局部指令中，指令名称不需要以v-开头 。

通过自定义指令，你可以根据具体的需求来扩展Vue的功能。

指令的选项对象可以包含多个生命周期函数，例如inserted、bind、update等，你可以根据需要来选择不同的生命周期函数进行处理。

同时，自定义指令也是Vue插件的一种方式，在开发插件时可以使用自定义指令来增强Vue的功能。

vue 自定义指令 钩子函数

在Vue中，自定义指令的选项对象可以包含一些钩子函数，这些钩子函数在指令的不同生命周期阶段被调用。下面是一些常用的钩子函数：

1. bind：只调用一次，在指令被绑定到元素时调用。可以在这个钩子函数中进行初始的设置、绑定事件监听器等操作。

2. inserted：在被绑定元素插入到父节点时调用（仅保证父节点存在，但不一定已被插入DOM中）。可以在这个钩子函数中执行元素的插入操作，如设置焦点、添加样式等。

3. update：在指令所在元素的模板更新时调用，但可能发生在其子元素模板更新之前。比较常见的使用场景是对比指令的绑定值（binding.value）和更新值（binding.oldValue），并根据需要进行相应的操作。

4. componentUpdated：在指令所在元素的模板及其子元素的模板都更新后调用。可以在这个钩子函数中进行操作，如更新元素状态、调用第三方库的方法等。

5. unbind：只调用一次，在指令与元素解绑时调用。可以在这个钩子函数中清除绑定的事件监听器、移除样式等。

这些钩子函数可以在自定义指令的选项对象中使用，例如：

Vue.directive('customDirective', {
  bind: function (el, binding) {
    // 初始化设置
  },
  inserted: function (el, binding) {
    // 元素插入父节点后的操作
  },
  update: function (el, binding) {
    // 元素模板更新时的操作
  },
  componentUpdated: function (el, binding) {
    // 元素及子元素模板都更新后的操作
  },
  unbind: function (el, binding) {
    // 解绑时的清理操作
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在以上的钩子函数中，el参数是指令所绑定的元素，binding参数是一个对象，包含了指令的信息，如value（绑定值）、oldValue（旧的绑定值）、arg（参数）、modifiers（修饰符）等。

通过使用这些钩子函数，你可以在自定义指令的不同生命周期阶段处理相应的逻辑，实现更灵活和强大的指令功能。

vue3 自定义指令

在Vue 3中，自定义指令的方式与Vue 2有所不同。

通过app.directive()方法来创建全局指令，或者在组件的directives选项中注册局部指令。

分类

全局指令 app.directive()

局部指令 directives

下面是Vue 3中自定义指令的示例：

1. 全局指令：

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13

然后在模板中使用v-focus指令：

<template>
  <input v-focus>
template>
1
2
3
4

2. 局部指令：

// MyComponent.vue
export default {
  directives: {
    scroll: {
      mounted(el, binding) {
        window.addEventListener('scroll', binding.value)
      },
      unmounted(el, binding) {
        window.removeEventListener('scroll', binding.value)
      }
    }
  },
  // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

然后在组件的模板中，可以像下面这样使用v-scroll指令：

<template>
  <div v-scroll="handleScroll">
    
  div>
template>
1
2
3
4
5
6

在Vue 3中，自定义指令的选项对象中只包含两个钩子函数：mounted和unmounted。

mounted钩子函数在指令所在元素被挂载到DOM后调用，而unmounted钩子函数在指令所在元素从DOM中卸载后调用。

除了钩子函数外，指令对象还可以使用其他的配置项，如beforeMount、updated、beforeUnmount等。

但这些配置项在Vue 3中被视为高级选项，并且不建议频繁使用。

通过自定义指令，你可以在Vue 3中扩展元素的行为和样式，并根据需要执行相应的逻辑。

vue3 自定义指令 钩子函数

在Vue 3中，自定义指令可以使用的钩子函数有以下几个：

1. beforeMount：在指令所在组件挂载之前调用，即在beforeMount生命周期钩子之前调用。

2. mounted：在指令所在组件挂载到DOM后调用，即在mounted生命周期钩子之后调用。

3. beforeUpdate：在指令所在组件更新之前调用，即在beforeUpdate生命周期钩子之前调用。

4. updated：在指令所在组件更新之后调用，即在updated生命周期钩子之后调用。

5. beforeUnmount：在指令所在组件卸载之前调用，即在beforeUnmount生命周期钩子之前调用。

6. unmounted：在指令所在组件卸载之后调用，即在unmounted生命周期钩子之后调用。

这些钩子函数可以在自定义指令的选项对象中使用，例如：

import { createApp } from 'vue'

const app = createApp()

app.directive('customDirective', {
  beforeMount(el, binding, vnode) {
    // 指令被绑定到元素之前的操作
  },
  mounted(el, binding, vnode) {
    // 指令被绑定到元素之后的操作
  },
  beforeUpdate(el, binding, vnode, prevVnode) {
    // 组件更新之前的操作
  },
  updated(el, binding, vnode, prevVnode) {
    // 组件更新之后的操作
  },
  beforeUnmount(el, binding, vnode) {
    // 指令被解绑之前的操作
  },
  unmounted(el, binding, vnode) {
    // 指令被解绑之后的操作
  }
})

app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在以上的钩子函数中，el参数是指令所绑定的元素，binding参数是一个对象，包含了指令的信息，vnode参数是虚拟节点，prevVnode参数是前一个虚拟节点（仅在beforeUpdate和updated钩子函数中可用）。

通过使用这些钩子函数，你可以在自定义指令的不同生命周期阶段处理相应的逻辑，例如在组件挂载前后进行操作、在组件更新前后执行一些特定逻辑等。请根据具体需求选择合适的钩子函数来使用。