vue自定义指令directives

官网:https://cn.vuejs.org/v2/guide/custom-directive.html

v-if等是内置的指令, 在这里研究自定义指令

局部自定义指令

在directives中定义,在一个组件中定义的,只能在这一个组件中使用 ;

定义命令:

   directives:{
        //自定义指令color,el是这个标签,binding是传入的值
        color:function(el,binding){
            el.style.color=binding.value
        }
    }
//自定义了 color
1
2
3
4
5
6
7

调用命令:

<p v-color="'red'">hello123p>
//使用 v-color  调用
传入的值使用"' '"包裹着
1
2
3

全局自定义指令

只需要把自定义的指令放到根节点的组件中定义即可

更细致定义

一个自定义对象可以定义几个钩子函数,没有声明的时候,默认是bind和update

//自定义指令color
        color:{
            bind:function(el,binding){
                el.style.color=binding.value
            },
            inserted:function(el){//不需要值
            }
        }
1
2
3
4
5
6
7
8

案例:input获取光标

//定义字段
focus:{
    inserted:function(el,binding){
        el.focus()
    }
}
//调用
<input type="text" v-focus />
1
2
3
4
5
6
7
8