我们使用过一些Vue的内置指令,如v-text, v-for等由Vue操作DOM为我们实现的指令。
我们可以根据自己的需求实现自定义指令,语法格式如下:
<标签 v-自定义指令名> </标签>
directives:{自定义指令名(element, binding) { // 实现代码 }
}
这里的element 就是DOM节点,binding就是指令的相关信息,value就是传入的值:
我们就可以使用DOM节点和拿到的数据满足我们n放大10倍的需求:
一些注意事项:
-
自定义指令在页面初始化和每次重新解析DOM模板的时候都会调用。
-
directives中的this指向的是window。
-
在DOM中自定义指令名之间使用-进行连接,如:v-bind-number。