Vue 自定义指令详解(看了就会)

最新推荐文章于 2024-05-18 00:17:51 发布
最新推荐文章于 2024-05-18 00:17:51 发布
阅读量365 收藏
点赞数
分类专栏： Vue开发实战总结 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HaiJun_Aion/article/details/127705453
版权

在这里插入图片描述

指令概念

Vue提供的指令方便了我们开发，有时我们需要对DOM 底层进行操作，就可以用自定义指令。

自定义指令分为：

  • 全局指令
  • 局部指令

在自定义指令时不需 加 ‘v’ ，在使用在才加。 指令包含5个钩子函数，用来对DOM 不同时期进行操作。

局部指令

在Vue单个组件里注册使用。

directives:{
   
  formatData:{
   
    //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    bind(el
了解本专栏 订阅专栏 解锁全文 超级会员免费看
程序员海军
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
vue2中自定义指令传参和不传参的使用
Rised的博客
01-07 1500
以下是效果,因为我这里使用了v-if的让其动态显示就是为了查看bind和unbind的效果，此时ss指令还没有，所已没有效果。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。以下是我的自定义指令的代码，有两个。bind：只调用一次，指令第一次绑定到元素时调用。在这里我只用到了自定义指令中的bind，insert和unbind。这是不带参数的代码，就修改了两处，一处使自定义指令处的代码。这是使用自定义指令的vue文件 注意这里使用了参数。元素消失，指令自然也就不存在了。
自定义指令中的钩子函数...
m0_60237095的博客
07-27 2383
一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 我们会在稍后讨论渲染函数时介绍更
vue2中的自定义指令的基本语法、常见参数与使用场景，超详细教程！
最新发布
共同学习，共同成长
05-18 2315
今日给大家讲解vue2中的自定义指令的基本语法、指令的常见参数与常见使用场景，并结合具体案例来让小伙伴们深入理解，彻底掌握！快来看看吧~
vue中如何自定义指令directive
田兴的博客
12-18 8144
vue除了内置指令（v-model,v-for,v-bind…）,vue 也允许注册自定义指令. 注册自定义指令分为全局注册与局部注册两种： 注册 注册一个使元素自动获取焦点的指令 全局注册 使用Vue.diretive()来全局注册指令。 // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted...
vue 自定义指令如何传参
qq_36437172的博客
10-09 2326
一、可视区域加载指令 用来控制组件显隐的指令。当前组件到达可视区域后显示该元素。 import Vue from 'vue' const waypoint = Vue.directive('waypoint', { inserted (el, binding, vnode) { const { showStr } = binding.value // 控制组件显隐的变量名称，注意，传字符串 const scroll = () => { if (vnode.con
vue自定义可传参指令
qq_42928070的博客
03-11 300
Vue.directive('longpress',function(el,binding,vNode){ console.log(el,binding,vNode) let timer = null; var start = function(e){ if(e.type == 'click') return; if(timer==null){ timer = setTimeo...
Vue自定义指令详解
08-29
Vue自定义指令详解 在Vue.js中，自定义指令是一种强大的机制，允许开发者将数据的变化映射为DOM行为。下面，我们将详细介绍Vue自定义指令的相关知识点。 注册自定义指令 在Vue.js中，可以使用`directive`方法注册...
vue自定义指令实现方法详解
10-17
Vue自定义指令提供了一种灵活的方式来扩展Vue的默认功能，使得我们可以更精确地控制DOM操作。通过定义不同的钩子函数，我们可以实现各种复杂逻辑，如事件监听、动画效果、DOM操作等。理解并掌握自定义指令的使用，...
vue自定义指令directive实例详解
08-28
Vue 自定义指令Directive 实例详解 Vue 自定义指令Directive 是一种强大的工具，允许开发者注册自己的指令，以便于更好地操作 DOM 元素。在 Vue 中，自定义指令Directive 可以分为全局指令和局部指令两种。 全局...
Vue自定义指令 传递参数
zhangbao_online
04-27 4925
在项目开发过程中，难免会遇到各种功能需要使用Vue自定义指令--directive 去实现 。关于directive的使用方式这里就不做过多的介绍了，Vue官方文档中说的还是听明白的。今天讲讲在使用Vue自定义指令过程中 1. 怎么数据传递到自定义指令中 2.怎么讲自定义指令中的数据传回到组件实例中 一、将数据传递到自定义指令中 <li class="table-columns...
vue自定义指令
xiaonankeji的博客
12-12 8556
vue自定义指令，自定义指令传参，自定义指令实现拖拽、防抖
Vue 自定义指令绑定的处理函数中传递参数
dark_cy的博客
06-29 4274
　　现在需要为自定义指令绑定函数，并且需要向函数中传递参数，类似 。　　Vue 的指令预期得到的值是一个 JavaScript 表达式，除了 v-on 和 v-for 这两个特殊指令外，其他的指令会自动计算该表达式的值，将最终的计算结果传递给指令。所以自定义的指令不能用 的形式绑定函数值，因为 作为一个 JavaScript 表达式会被立即执行，最终会将其返回值传递给指令。　　那么当我们想要为自定义指令绑定函数值，又想为其传递参数该怎么办呢?　　利用指令的值预期得到一个 JavaScript 表达式的特
vue.js---自定义指令 (配置传参及修饰符)
qq_39111062的博客
05-28 5933
钩子函数的属性binding：一个对象，包含以下属性：name：指令名，不包括 v- 前缀。 value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。//等于号后面的值 oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 expression：字符串形式的指令表达式。例如 v-m...
自定义指令函数传参
lyd的博客
01-27 2156
环境： vue@2.6.6 问题： 绑定函数传参 传参多个多样 参数动态变化 方案： 1. 采用传对象方式(binding.value) <el-button v-mydirective="{ fn: myFn, args: x }" type="text" size="small">测试</el-button> const mydirective = { inserted: function (el, binding) { const args = bindin
vue-自定义指令传参
热门推荐
harmsworth的博客
06-13 2万+
自定义指令传参 指令 环境 传参方式 参考 自定义指令传参 指令 在vue官网中，常用指令有v-model和v-bind，但是，如果我们需要对DOM元素进行底层操作，就需要用到自定义指令。 今天主要讲到传参的2种方式。 环境 vue2.3.3 node6.11.2 webpack2.6.1 传参方式 在main.js中定义一个指令。 Vu...
07.自定义指令传参小窍门
粉丝们务必加入微信粉丝群
08-06 364
新增两个按钮，一个是改变绑定幸免于难的字体大小，一个是改变绑定元素的颜色。当点击按钮时，我们在点击事件里面去更改了这两个变量的值，分别是。实际上，如果指令需要多个值，可以传入一个 JavaScript 对象字面量。不幸的是，如果你想要多个参数，Vue 会把它们当作不同的指令。中，因为点击按钮改变了指令的参数和值，所以，我们需要在。两个属性，然后点击按钮时，我们更改了这两个属性的值。这里，我们给指令传入一个对象的值，包含。的值就是我们传入的对象，然后我们通过。，但我们也可以建立自己的自己的指令。...
Vue中全局指令传递参数
weixin_45616246的博客
04-08 995
请陛下批阅 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义指令传递参数</title> <script src="../../vue/vue.js"></script> <...
VUE3.0自定义指令使用详细教程（全局指令封装，使用自定义指令，动态传参，举例：input框聚焦、文本高亮、元素平滑上升）
weixin_44340123的博客
11-28 2495
VUE3.0自定义指令使用详细教程（全局指令封装，使用自定义指令，动态传参，举例：input框聚焦、文本高亮、元素平滑上升）
Vue 3自定义指令详解：基础与实战应用
Vue 3 自定义指令开发是前端开发中一个重要的高级特性，它允许开发者扩展Vue框架的功能，使其适应特定业务场景。指令在前端框架中扮演着桥梁角色，连接视图层（View）和模型层（Model），使得开发者能够以声明式的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值