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。

相关推荐
运维全栈笔记2 小时前
Vue + Spring Boot 前后端分离项目部署笔记(若依 RuoYi-Vue 3.9.2)
运维·服务器·vue.js·spring boot·笔记·开源·开源软件
ly76897 小时前
HTML5 从入门到工程实践:语义化、表单、多媒体、性能与项目规范详解
前端·html·html5
人民广场吃泡面11 小时前
前端该重视的编程思想
前端
冬夜戏雪11 小时前
agent的trace 和eval
开发语言·前端·javascript
IT_陈寒11 小时前
Redis的DEL命令居然没删干净数据?这个坑我爬了半天
前端·人工智能·后端
kyriewen11 小时前
面试官让我现场用 AI 改一个真实 bug——他打断我的 3 个理由
前端·面试·ai编程
计算机魔术师12 小时前
斯坦福研究:AI 对入门级岗位冲击最大
前端
感谢一路走过的人13 小时前
AGGrid刷新数据后执行筛选
javascript·ag-grid