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 分钟前
JavaScript-小游戏-2048
javascript
爱心发电丶17 分钟前
基于UniappX开发电销APP,实现CRM后台控制APP自动拨号
javascript
地狱恶犬萨煤耶18 分钟前
JavaScript-实现函数方法-改变this指向call apply bind
javascript
地狱恶犬萨煤耶21 分钟前
JavaScript-小游戏-单词消消乐
javascript
q***311442 分钟前
【Springboot3+vue3】从零到一搭建Springboot3+vue3前后端分离项目之后端环境搭建
android·前端·后端
q***12531 小时前
Plugin ‘org.springframework.bootspring-boot-maven-plugin‘ not found(已解决)
java·前端·maven
攻城狮CSU1 小时前
C# 异步方法
开发语言·前端·c#
tyro曹仓舒1 小时前
干了10年前端,才学会使用IntersectionObserver
前端·javascript
S***y3961 小时前
前端微前端框架对比,qiankun与icestark
前端·前端框架
Wect1 小时前
学习React-DnD:实现多任务项拖拽-useDrop处理
前端·react.js