VUE自定义指令

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) {},
};

钩子函数

  1. bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。

  2. inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。

  3. update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。

  4. componentUpdated:被绑定的元素所在模板完成一次更新周期是调用。

  5. unbind:只调用一次,指令与元素解绑时调用

相关推荐
cy玩具19 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
334554321 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json