前面已经介绍了几个系统提供的指令,比如 “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
}
}
})