【Vue.js 自定义指令配置使用】

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


提示:这里可以添加本文要记录的大概内容:

Vue.js是一种流行的JavaScript框架,用于构建交互式的Web界面。在Vue.js中,自定义指令允许开发者直接操作DOM元素,并将特定的行为绑定到DOM元素上。Vue.js提供了一些内置的指令(如v-if、v-for等),同时也允许开发者创建自己的自定义指令。


提示:以下是本篇文章正文内容,下面案例可供参考

一、全局自定义指令

链接: Vue.js 自定义指令中bind和unbind方法何时调用以及如何与生命周期函数(mounted/destroyed)相关

示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。

二、自定义指令的生命周期

引用: Vue.directive指令(自定义指令)

自定义指令有5个生命周期(也叫作钩子函数)分别是bind ,inserted,update,componentUpdate,unbind

  1. bind 只调用一次,指令第一次绑定到元素时候调用,用这个钩子可以定义一个绑定时执行一次的初始化动作。
  2. inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用,不必存在document中)
  3. update: 被绑定与元素所在模板更新时调用,而且无论绑定值是否有变化,通过比较更新前后的绑定值,忽略不必要的模板更新
  4. componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用
  5. unbind: 只调用一次,指令月元素解绑的时候调用
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
   <div id="app">
       <span v-hello="color3">{{message}}</span>
       <button @click="add"> 点击开始加1</button>
       <button onclick="jiebang()">解绑</button>
   </div>
</body>
<script>
    function jiebang(){
        app.$destroy();
    }
    Vue.directive("hello",{
        bind:function(el,bingind,vnode){
            el.style["color"] = bingind.value;
            console.log("1-bind");
        },
        inserted:function(){
            console.log("2-insert");
        },
        update:function(){
            console.log("3-update");
        },
        componentUpdated:function(){
            console.log('4 - componentUpdated');
        },
        unbind:function(){
            console.log('5 - unbind');
        }
    })
    var app = new Vue({
        el:"#app",
        data:{
            message:10,
            color3:"red"
        },
        methods:{
            add:function(){
                this.message++;
            }
        }
    })
</script>
</html>

三、自定义指令中的bind方法

在Vue.js中,自定义指令中的bind方法在指令第一次绑定到元素时调用。它接收四个参数:
– el:指令所绑定的元素,可以通过el访问DOM元素的属性和方法。
– binding:与指令关联的对象。可以通过binding.value访问指令的值。
– vnode:Vue编译生成的虚拟节点。
– oldVnode:上一个虚拟节点,仅在update和componentUpdated钩子中可用。

下面是一个简单的例子,展示了bind方法的使用:

      app.directive("hello",function(el,binding,vnode){
        el.style["color"]= binding.value;
     })

在 Vue.js 中,如果你定义一个指令而没有指定 inserted 或 bind,Vue 会隐式地将其视为你在 bind 钩子中定义了指令的行为。所以,你的代码实际上等同于:

app.directive("hello", {
  bind: function(el, binding, vnode) {
    el.style["color"] = binding.value;
  }
});

在上面的例子中,我们创建了一个名为”hello”的自定义指令。当该指令绑定到元素上时,bind方法会被调用,并将绑定的值应用到元素的颜色上。

   <span v-hello="'red'">{{message}}</span>

四、全局自定义指令

1.vue2全局

文件结构
在这里插入图片描述在这里插入图片描述

根目录下建立directives文件夹,在里面建立index.js
在 directive/index.js 代码如下(示例):

import Focus from './Focus'
import copy from './copy';
import op from './ceshi';

const directives = {  //汇总自定义指令
  Focus,//聚焦指令
  copy,
  op
}

export default {  //导出自定义指令
  install(app) {// 以安装的方式插到app中
    Object.keys(directives).forEach((key) => {    // 遍历directives对象的key
      app.directive(key, directives[key])  // 将每个directive注册到app中
    }),
      //单个直接
      app.directive("hello", function (el, binding, vnode) {
        el.style["color"] = binding.value;
      })

  }
}

在 Focus.js 代码

export default {

 // 当绑定元素和指令之间的绑定关系建立时立即调用
 bind:  (el,binding,vNode) =>{
    // 更新元素的背景颜色为红色
    el.style.background =  binding.value ||'yellow';
    
    // 添加鼠标指针样式
    el.style.cursor = 'pointer';

    // 添加鼠标进入事件监听器
    el.addEventListener('mouseenter', function () {
      el.style.color = 'aquamarine';
    });

    // 添加鼠标离开事件监听器
    el.addEventListener('mouseleave', function () {
      el.style.color = ''; // 恢复默认颜色
    });
  },
  unbind:function(el){
    // app.$destroy()
    el.style.background = 'red';
    // el.removeAttribute('v-op');
}
  }

在main.js 全局 (注意路径名字!)

import Directives from './directive'

Vue.use(Directives)

全局定义后,页面指令的使用方式,v-指令名=“指令方法”,指令方法可以是函数也可以是对象,
例如v-Focus="'red'" 或者 v-Focus 没有 binding:与指令关联的对象,使用默认样式

     <div  class="main_right_parms_title" v-Focus="'red'" @click="reElement">巡检视频</div>

v-Focus:color=“‘yellow’” 第一个 arg 参数名 value 为 参数值 ,如果是函数 需要binding.value() 来执行这个函数,而不是只获取它的值。
在这里插入图片描述)

2.vue3 - vite

vue3中 自定义指令周期函数与vue2不同 ,其他一致,使用vue提供install来供我们开发新的插件及全局注册组件等

在 Focus.js 代码 代码如下(示例):

export default {
    beforeMount(el, binding) {
      // 获取传递的参数
      const arg = binding.arg //从这里获取参数名,也就是第一个color
      const value = binding.value //从这里获取参数值,也就是第二个color
      console.log('binding',binding);
      
      // 将参数保存在指令上下文中
      el._directiveContext = { arg, value }
      el.style.backgroundColor = value || '#f00' //DOM操作,设置背景颜色
    },
    updated(el, binding) {
      // 获取更新后的参数
      const value = binding.value //更新后的参数值
      el.style.backgroundColor = value //更新DOM
    }
  }

在vue页面使用,指令如下:


  <p v-highlight>这段文本会高亮显示,不传参</p>
  <p v-highlight:color="'yellow'">
    这段文本会高亮显示,用来演示动态传参,第一个color是参,第二个color是值
  </p>

3.vue3 - vite - ts

根目录下建立directives文件夹,在里面建立index.js
在 directive/index.js 代码如下(示例):

//  directive/index.js
import { App } from 'vue'
import Focus from './Focus'

const directivesList :any= {  //汇总自定义指令
    Focus,//聚焦指令
  }

const directives = {
  install: function (app: App<Element>) {
      Object.keys(directivesList).forEach(key => {
          // 注册自定义指令
          app.directive(key, directivesList[key]);
      });
  }
};

export default directives;

在 Focus.js内

import type { Directive, DirectiveBinding } from "vue";

interface ElType extends HTMLElement {
  // 扩展了 HTMLElement 接口的属性
  copyData: string | number;
  __handleClick__: any;
}

const  Focus :Directive= {
  mounted (el :ElType ,binding :DirectiveBinding) {
    console.log('red', el)
    el.style.background = 'yellow'
  }
}
export default  Focus


总结 与 封装指令

v-bind指令基本用法: https://blog.csdn.net/qq_41196217/article/details/117253289

Vue自定义指令封装: https://blog.csdn.net/zyplll/article/details/111937608

元素平滑上升: https://blog.csdn.net/weixin_44340123/article/details/134662489

Vue3+TypeScript封装常用自定义: https://blog.csdn.net/qq_42365152/article/details/124633877

提示:这里对文章进行总结:

防抖

  <button v-debounce="{fn: handleClick, event: 'click', delay: 2100}">点击试试</button>
// debounce.js
  const debounce = {
 
    mounted(el, binding) {
      // 至少需要回调函数以及监听事件类型
      if (typeof binding.value.fn !== 'function' || !binding.value.event) return;
      let delay = 200; // 默认延迟时间
      el.timer = null;
      el.handler = function() {
        if (el.timer) {
          clearTimeout(el.timer);
          el.timer = null;
        };
        el.timer = setTimeout(() => {
          binding.value.fn.apply(this, arguments)
          el.timer = null;
        }, binding.value.delay || delay);
      }
      el.addEventListener(binding.value.event, el.handler)
    },
    // 元素卸载前也记得清理定时器并且移除监听事件
    beforeUnmount(el, binding) {
      if (el.timer) {
        clearTimeout(el.timer);
        el.timer = null;
      }
      el.removeEventListener(binding.value.event, el.handler)
    }
  }
  export default debounce;

  • 12
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值