vue自定义指令

vue2

指令的生命周期钩子

自定义指令中的钩子函数：

• bind：只调用一次，指令绑定到指定元素时调用
• inserted：指定元素插入父节点时调用（仅保证父节点存在，但不一定插入文档中）
• update：所在组件的 VNode 更新时调用
• componnetUpdated：所在组件以及其子组件 VNode 全部更新后调用
• unbind：只调用一次，指令与元素解绑时调用

钩子函数的参数：

• el 被绑定的元素，可以直接操作DOM

• binding对象

  name：指令名，不包括 v- 前缀。

  value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

  oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

  expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。

  arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

  modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

局部指令

<script>
export default {
  name:'App',
  // 局部指令，v-init
  directives: {
    init: {
      bind() { },
      inserted() { },
      update() { },
      componentUpdated() { },
      unbind() { }
    }
  }
}
</script>

全局指令

// 全局自定义指令
Vue.directive('init', {
  bind() { },
  inserted() { },
  update() { },
  componentUpdated() { },
  unbind() { }
})

批量注册全局指令

1. 在src/directives/index.js文件中书写指令

// 图片显示错误时，替换为默认图片
export const imgerror = {
  inserted(el, binding) {
    el.onerror = function () {
      el.src = binding.value
    }
  }
}

// 文字颜色
export const color = {
  inserted(el, binding) {
    el.style.color = binding.value
  }
}

2. 在main.js中导入并注册

//导入所有全局自定义指令
// directives为模块对象
import * as directives from './directives/index' 

// 批量注册全局自定义指令
for (const key in directives) {
  if (Object.hasOwnProperty.call(directives, key)) {
    Vue.directive(key, directives[key])
  }
}

vue3

局部指令

<template>
  <div class="App">
    App
    <input type="text" v-focus>
    <!-- <input type="text" v-focus2> -->
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// v-focus指令
const vFocus = {
  mounted(el, binding, vnode, prevVnode) {
    el.focus()
    console.log('局部指令v-focus');
  },
}
</script>

<style scoped></style>

全局指令

方式1 直接在main.js中定义

// import './assets/main.css'

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

const app = createApp(App)

// 全局指令v-focus2
app.directive("focus2", {
  mounted(el) {
    el.focus()
  }
})

app.mount('#app')

方式2 封装到directives文件夹中

focus.js

export default function directiveFocus(app) {
  // 全局指令v-focus2
  app.directive("focus2", {
    mounted(el) {
      el.focus()
      console.log('全局指令v-focus2');
    }
  })
}

index.js

import directiveFocus from './focus.js'

export default function useDirective(app) {
  directiveFocus(app)
}

main.js

// import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import useDirective from './directives'

const app = createApp(App)

app.use(createPinia())
app.use(router)

// 注册全局自定义指令
useDirective(app)

app.mount('#app')

指令的生命周期钩子

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>
  <div class="App">
    <h1 v-prefix:arg1.m1.m2="'***'">hi</h1>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// v-prefix指令 给文本添加前缀
const vPrefix = {
  mounted(el, binding, vnode, prevVnode) {
    console.log(binding);

    // 默认前缀
    const defaultPrefix = '$'
    if (!binding.value) {
      el.innerHTML = defaultPrefix + el.innerHTML
      return
    }
    el.innerHTML = binding.value + el.innerHTML
  },
}
</script>