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。

相关推荐
kyriewen21 小时前
我开发的 Chrome 扒图浏览器插件又更新了❗
前端·chrome·浏览器
程序员祥云21 小时前
Prompt项目说明文档
前端
一勺菠萝丶1 天前
如何在 Linux 服务器上使用 Speedtest 官方 CLI 测试带宽(小白教程)
java·服务器·前端
DianSan_ERP1 天前
京东订单接口集成中如何处理消费者敏感信息的安全与合规问题?
前端·数据库·后端·团队开发·运维开发
TEC_INO1 天前
Linux50:ROCKX+RV1126视频流检测人脸
开发语言·前端·javascript
下载居1 天前
Node.js(Javascript运行环境) 26.1
开发语言·javascript·node.js
Dragon Wu1 天前
Taro v4.2.0 scss使用“@/xxx“的配置方法
前端·小程序·taro·scss
wordbaby1 天前
如何封装一个生产级的 React Native 分页列表 Hook
前端·react native·react.js
小帅不太帅1 天前
我做了两个工具,一个 7MB 的壳,一个会记住的壳
前端·app·产品
不瘦80斤不改名1 天前
HTML基础(一)
开发语言·前端·html