vue学习第15天,自定义指令

本文详细介绍了Vue中自定义指令的使用方法及其钩子函数,包括bind、inserted、update等,并解释了如何利用这些钩子函数进行DOM操作,同时列举了钩子函数接收的各种参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1,在vue 中大多数的代码复用抽象是通过组件实现的 但是避免不了操纵 DOM 可以给DOM 使用自定义指令

2,自定义指令函数 提供了一些钩子 bind 钩子 仅在指令第一次绑定到元素上的时候调用一次 执行一些操作

3,自定义指令 inserted 钩子 插入父节点时候调用

4,自定义指令 update 钩子 组件的 vnode 更新的时候 或者其孩子的 vnode 更新的时候 调用

5,自定义指令 componentUpdated 钩子 所在组件的 vnode 和其子节点的 vnode 均 更新的时候 调用

6,自定义指令 unbind 钩子 仅在指令与元素解除绑定的时候调用一次

7,自定义指令 的钩子函数 可以接受参数 

8,el 参数 绑定的元素

9,binding 参数 是一个拥有一系列属性的对象  

10,name 属性 指令的名字 去掉 v-

11,value  属性 指令接受到的计算后的值

12,oldValue  属性 指令绑定的前一个计算后的值  在 updata componentUpdate 两个更新钩子调用时候 可以使用

13,expression 属性 指令 接受到的 计算前的值

14,arg 属性 传给指令的参数

15,modifires  属性 指令拥有的修饰符的对象

16,vnode 属性 vue编译器生成的虚拟节点

17,oldVnode 属性 上一个虚拟节点 和 oldValue 一样 只能在 update vomponentUpdate 钩子调用的时候 使用

18,对象字面量 指令可以接受一个对象字面量 对象里面可以加入多个参数

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值