VUE自定义指令

kxmdjqq2023-09-16 14:41

home.vue

javascript 复制代码

<template>
  <div class="home" v-copy>this is home</div>
</template>

main.js

javascript 复制代码

import customCopy from "@/directive/customCopy";
Vue.directive("copy", customCopy);

customCopy.js

javascript 复制代码

export default const customCopy = {
  inserted(el, binding) {
    console.log("DOM文本", el.innerText); // text this is home
    el.addEventListener("click", (e) => {
      el.append("复制成功");
    });
  },
  updated(el, binding) {},
};

钩子函数

bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。
update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
componentUpdated:被绑定的元素所在模板完成一次更新周期是调用。
unbind:只调用一次,指令与元素解绑时调用