Vue自定义指令

---

前言

首先我们知道vue中有很多内置指令，比如说 v-text，v-bind， v-if，v-for等等，但是怎样定义一个自定义的指令呢？

什么是自定义指令，我们知道 v-if 指令是用于条件性地渲染一块内容，那此时我想定义一个指令，让某个数变大10倍，我把这个指令叫叫做v-big，v-big=“n”， 当n等于1的时候页面显示10，当n等于2的时候页面显示20，我们怎么用指令做到呢？

---

注意： 自定义指令是要我们对普通 DOM 元素进行底层操作的。

1、简单的自定义指令示例（自定义指令是个函数）

需求：定义v-big指令，和v-text功能类似，但会把绑定的值放大10倍；

定义新指令，用 directives 配置项：

运行结果：

我们可以看出，当自定义指令是个函数时，接受两个参数，第一个参数是绑定当前指令的真实DOM元素，第二个参数是个对象，表示当前指令的详细信息。

2、较为复杂的自定义指令（自定义指令是个对象）

需求：定义一个 v-fbind 指令，和 v-bind 功能类似，但可以让其绑定的input框自动获取焦点。
（不要给input加 autofocus 属性，我们要自己实现）

踩坑注意：

<input v-fbind:value="n" />

// 定义指令
directives: {
   fbind(el, obj) {
     el.value = obj.value;
     el.focus();
   },
 },
1
2
3
4
5
6
7
8
9

理论上我们上述写法是没有问题的，但是运行却发现input框却没有自动获取焦点，这是为什么呢？

因为fbind指令在两种情况下会被调用：

1. 第一是在指令与元素成功绑定时（一上来）；
2. 第二是指令所在的模版被重新解析时；

vue做事分好几步，我们写的代码要经过vue的编译和解析，当指令与元素成功绑定时只是意味着两者在内存里面建立了关系，但此时input这个dom元素还没有被放入到页面中，这个时候调用 el.foucus() 当然是不奏效的。所以我们应该在vue把input元素放入页面以后再去调用focus函数才可以。

我们把fbind指令写成一个对象：

当指令是个对象时，里面有三个函数，分别在不同的时机会被自动调用执行，函数名字不可更改。
当指令写成函数时，相当于写了bind函数和update函数。

3、全局自定义指令

上面所说的都是在组件里定义自定义指令，当我们想全局使用时：

Vue.directive('fbind', {
    bind: function(el, obj) {
       ....
    },
})
1
2
3
4
5