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。