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。

相关推荐
韩曙亮几秒前
【Web APIs】浏览器本地存储 ② ( window.sessionStorage 本地存储常用 API 简介 | 代码示例 )
开发语言·前端·javascript·localstorage·sessionstorage·web apis·浏览器本地存储
time_rg1 分钟前
深入理解react——2. Concurrent Mode
前端·react.js
0_12 分钟前
封装了一个vue版本 Pag组件
前端·javascript·vue.js
Stirner5 分钟前
A2UI : 以动态 UI 代替 LLM 文本输出的方案
前端·llm·agent
Code知行合壹7 分钟前
Vue.js进阶
前端·javascript·vue.js
我叫唧唧波12 分钟前
【微前端】qiankun基础
前端·前端框架
摸鱼的春哥13 分钟前
企业自建低代码平台正在扼杀AI编程的生长
前端·javascript·后端
-凌凌漆-14 分钟前
【JS】var与let的区别
开发语言·前端·javascript
火车叼位15 分钟前
使ast-grep-vscode 识别Vue组件
前端·visual studio code
YAY_tyy19 分钟前
综合实战:基于 Turfjs 的智慧园区空间管理系统
前端·3d·cesium·turfjs