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。

相关推荐
devincob17 小时前
js原生、vue导出、react导出、axios ( post请求方式)跨平台导出下载四种方式的demo
javascript·vue.js·react.js
编程社区管理员17 小时前
React 发送短信验证码和验证码校验功能组件
前端·javascript·react.js
葡萄城技术团队17 小时前
迎接下一代 React 框架:Next.js 16 核心能力解读
javascript·spring·react.js
全马必破三17 小时前
React“组件即函数”
前端·javascript·react.js
三思而后行,慎承诺17 小时前
React 底层原理
前端·react.js·前端框架
座山雕~17 小时前
html 和css基础常用的标签和样式
前端·css·html
課代表18 小时前
JavaScript 中获取二维数组最大值
javascript·max·数组·递归·array·最大值·二维
灰小猿18 小时前
Spring前后端分离项目时间格式转换问题全局配置解决
java·前端·后端·spring·spring cloud
im_AMBER18 小时前
React 16
前端·笔记·学习·react.js·前端框架
02苏_19 小时前
ES6模板字符串
前端·ecmascript·es6