【Vue】自定义指令（全局定义 & 局部定义）

前面已经介绍了几个系统提供的指令，比如 “v-text”、“v-bind”、“v-on” 等等，本文我们来介绍下自定义指令的实现。

自定义全局指令

我们想创建一个自动获取焦点的指令，该功能其实可以通过 document.getElementById('search').focus() 来实现，但此处我们专门来介绍下自定义指令的实现方式。

效果实现

• 定义全局指令：v-focus

Vue.directive("focus",{
    bind:function(el){

    },
    inserted:function(el){
        el.focus()
    },
    updated:function(el){

    }
})

• 使用v-focus指令

<div id="app">
    姓名：<input type="text" v-focus><br>
    密码：<input type="password">
</div>

• 实现效果

我们可以看到刷新后搜索框获取到了焦点，说明我们创建的 v-focus 指令生效了。现在我们来具体解释一下。

指令名称

Vue中所有的指令，在调用的时候，都以 v- 开头，但是在定义的时候我们不用添加v-前缀。

参数方法

定义 v-focus 指令时，第二个参数是一个对象，这个对象身上有一些指令相关的函数，这些函数可以在特定的阶段执行相关的操作。

钩子方法	说明
bind	当指令绑定到元素上时，会立即执行bind 函数，只执行一次
inserted	元素插入到DOM中时，会执行 inserted 函数，触发1次
updated	当VNode更新时，会执行 updated， 可能会触发多次

方法的参数值

第一个参数，永远是el ，表示被绑定了指令的那个元素，这个el参数，是一个原生的JS对象。
第二个参数，binding：一个对象，包含以下属性：

参数	说明
name	指令名，不包括 v- 前缀。
value	指令的绑定值
oldValue	指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression	字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg	传给指令的参数，可选。例如 v-my-directive：foo 中，参数为 “foo”。
modifiers	一个包含修饰符的对象。例如 v-my-directive.foo.bar 中，修饰符对象为 { foo：true, bar：true }。

方法的使用场景

• 和样式相关的操作，一般都可以在 bind 执行。
• 和JS行为有关的操作，最好在 inserted 中去执行。

案例： 定义一个设置颜色属性的指令：v-color。

Vue.directive("color",{
    bind:function(el,binding){
        el.style.color=binding.value
    },
})

<div id="app">
    姓名：<input type="text" v-focus v-color="'red'"><br>
    密码：<input type="password">
</div>

自定义私有指令

和过滤器一样，全局指令所有的vm对象都可以共享，我们也可以为每个vm对象创建私有的指令，方法如下。

<div id="app">
    姓名：<input type="text" v-border="'red'"><br>
    密码：<input type="password">
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: { },
        directives:{
            'border':{
                bind:function(el,binding){
                    el.style.borderColor=binding.value
                }
            }
        }
    })
</script>

函数简写

很多时候，我们需要在 bind 和 update 时触发相同行为，而不关心其它的钩子。可以直接使用函数简写，等同于把代码写到 bind 和 update 方法中。

var vm = new Vue({
    el: "#app",
    data: { },
    directives:{
        'border':function(el,binding){
            el.style.borderColor=binding.value
        }
    }
})