Vue-自定义指令

本文介绍了Vue中自定义指令的两种类型:私有和全局。私有自定义指令在组件内声明,而全局自定义指令通过`Vue.directive()`全局注册。以修改元素颜色为例,展示了如何在`update`函数中实现动态颜色变更,而非在`bind`函数中,因为`bind`仅在创建时调用。同时,文章还讨论了简写自定义指令的条件,即`bind`和`update`逻辑相同的情况。
摘要由CSDN通过智能技术生成

自定义指令的分类

vue 中的自定义指令分为两类,分别是:

  • 私有自定义指令
  • 全局自定义指令
私有自定义指令

在每个 vue 组件中,可以在 directives 节点下声明私有自定义指令
在这里插入图片描述

全局自定义指令

全局共享的自定义指令需要通过“Vue.directive()”进行声明
语法:

Vue.directive('自定义指令的名字', {自定义指令的选项}})

使用方法:
需求: 把App根组件改成红色
在这里插入图片描述

全局自定义指令写在main.js中:
在这里插入图片描述
页面显示效果:
在这里插入图片描述

这种写法,只能定义一个颜色值,所以我们可以写一个动态提供颜色的。

在这里插入图片描述
示例:当我们写两个按钮,分别对应相应的色号,点击按钮,文字变成相应色号
在这里插入图片描述
在这里插入图片描述

为什么要写在update函数中,而不是bind函数生效
因为bind函数只会在创建时调用,更新时不会调用,点击按钮,更改显示颜色属于更新而不是创建

bind和update两段代码的简化:

Vue.directive('color', function (el, obj) {
  el.style.color = obj.value
})

什么时候可以简写:
如果bind和update中的实现逻辑,既代码完全一致,就可以简写。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值