Vue自定义指令

Vue自定义指令

vue中的众多指令，像 v-bind，v-model，v-if 等等都是vue自己自带的，我们称之为内置指令。

那有的时候我们想要实现的功能紧靠这些指令还无法实现，或者实现起来比较麻烦的时候，可以尝试通过自定义的方式写一个自己的定义出来的指令使用。

自定义指令：

指令的功能实现必定是通过一个函数去实现的

我们先知道 directives 配置项，它内部的函数，均会有两个参数值传入：

1. 第一个参数所传递的是指令所绑定的 html 标签
2. 第二个传的是这个标签所关联的值

这里说的是真实dom，写在函数上的形参就随意写了，但是建议语义化，提高可读性

有了这两个参数，我们就可以按照我们的意愿进行操作了

案例：

1. 需求1 定义一个v-big指令，与v-text类似，但是字体放大10倍
2. 需求2 定义个v-fbind指令，与v-bind类似，但是可以让它绑定的input获得焦点

<div id="root">
  <h2>当前n的值： <span v-text="n"></span>