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:只调用一次,指令与元素解绑时调用

相关推荐
Cshaosun16 分钟前
js版本之ES5特性简述【String、Function、JSON、其他】(二)
前端·javascript·es
__WanG19 分钟前
Flutter将应用打包发布到App Store
前端·flutter·ios
leluckys22 分钟前
flutter 专题十七 Flutter Flar动画实战
前端·flutter
豆包MarsCode38 分钟前
我用豆包MarsCode IDE 做了一个 CSS 权重小组件
开发语言·前端·javascript·css·ide·html
22x艾克斯1 小时前
Web Notifications API-让网页也能像QQ一样实现消息通知
前端
X 西安1 小时前
第十章JavaScript的应用
开发语言·javascript·ecmascript
想你的风吹到了瑞士1 小时前
变量提升&函数提升
前端·javascript·vue.js
生椰拿铁You1 小时前
12 —— Webpack中向前端注入环境变量
前端
Huazzi.2 小时前
免费好用的静态网页托管平台全面对比介绍
前端·网络·github·web
吃土少女古拉拉2 小时前
前端和后端
前端·学习笔记