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。

相关推荐
XLYcmy19 小时前
HTML/CSS/JS 基础与 Vue 技术栈深度解析
java·前端·css·html·vue3·vue2·api
新知图书19 小时前
12.3 智能体中Skill的约束与自进化实战
java·前端·数据库
风月说与山鬼19 小时前
四、Tailwind CSS——间距与尺寸
前端·css·tailwind css
en.en..19 小时前
C语言 static函数与头文件封装规范
java·c语言·前端
计算机魔术师19 小时前
旅途中用手机远程控制电脑?电脑不在身边,ToDesk/UU远程/TeamViewer移动端深度实测
前端
风月说与山鬼20 小时前
三、Tailwind CSS——排版与文字样式
前端·css·tailwind css
eokred20 小时前
图片预览组件的另一种设计:Headless、可组合、开箱即用
前端·react
南雨北斗20 小时前
解决web开发中前后端跨域通信(session失效问题)
前端
Y38153266220 小时前
body-upload-js
前端·javascript·浏览器·深拷贝·数据克隆