Vue自定义指令

我们使用过一些Vue的内置指令,如v-text, v-for等由Vue操作DOM为我们实现的指令。

我们可以根据自己的需求实现自定义指令,语法格式如下:

<标签 v-自定义指令名> </标签>
directives:{

自定义指令名(element, binding) { // 实现代码 }

}

这里的element 就是DOM节点,binding就是指令的相关信息,value就是传入的值:

我们就可以使用DOM节点和拿到的数据满足我们n放大10倍的需求:

一些注意事项:

  1. 自定义指令在页面初始化和每次重新解析DOM模板的时候都会调用。

  2. directives中的this指向的是window。

  3. 在DOM中自定义指令名之间使用-进行连接,如:v-bind-number。

相关推荐
Hashan1 分钟前
Elpis:抽离业务代码,发布NPM包
前端·javascript·vue.js
quikai19816 分钟前
python练习第六组
java·前端·python
用户47949283569159 分钟前
0.1加0.2为什么不等于0.3-答不上来的都挂了
前端·javascript·面试
rit843249910 分钟前
C#实现的远程控制系统
前端·javascript·c#
南山安19 分钟前
React学习:Vite+React 基础架构分析
javascript·react.js·面试
诺斯贝克19 分钟前
Unable to create converter for xxx.NetworkResponse<Auth> for method AuthService
前端·后端
listhi52019 分钟前
针对燃油运输和车辆调度问题的蚁群算法MATLAB实现
前端·算法·matlab
渔_21 分钟前
uni-app 页面传参总丢值?3 种方法稳如狗!
前端
快被玩坏了21 分钟前
二次封装了个复杂的el-table表格
前端
用户938169125536022 分钟前
在TypeScript中,可选属性(?)与null类型的区别
前端