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。

相关推荐
霍理迪9 分钟前
JS对象与函数初相识
开发语言·javascript·ecmascript
u13013011 分钟前
深入理解 M3U8 与 HLS 协议:从原理到实战解析
前端·音视频开发·流媒体·hls·m3u8
_OP_CHEN15 分钟前
【前端开发之CSS】(二)CSS 选择器终极指南:从基础到进阶,精准拿捏页面元素!
前端·css·html·网页开发·css选择器
ヤ鬧鬧o.15 分钟前
HTML安全密码备忘录
前端·javascript·css·html·css3
ヤ鬧鬧o.17 分钟前
小巧路径转换器优化
前端·javascript·css
阿宇爱吃鱼26 分钟前
uniapp input输入框,限制金额输入格式
前端·javascript·uni-app
Dreamy smile28 分钟前
JavaScript 实现 HTTPS SSE 连接
开发语言·javascript·https
coding随想29 分钟前
Web SQL Database API:一段被时代淘汰的浏览器存储技术
前端·数据库·sql
Marshmallowc31 分钟前
React 刷新页面 Token 消失?深度解析 Redux + LocalStorage 数据持久化方案与 Hook 避坑指南
javascript·react·数据持久化·redux·前端工程化
Dreamy smile35 分钟前
vue3 vite pinia实现动态路由,菜单权限,按钮权限
前端·javascript·vue.js