Vue进阶提升的关键之自定义指令

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

Vue自定义指令

案例代码还是在前一个案例的基础上我们来继续。




    
    
    
    Document
    
    


    


        
              
                    品牌管理
              
              
                    
                    Id:
                    
                    

                    
                    Name:
                    
                    


                    

                    
                        搜索名称关键字：
                        
                        
              
        



        
            
                
                    id
                    name
                    cTime
                    操作
                
            
            
                
                    {{item.id}}
                    {{item.name}}
                    {{item.ctime | msgDateFormat('yyyy-mm-dd hh-mi-ss') }}
                    删除

id	name	cTime	操作
{{item.id}}	{{item.name}}	{{item.ctime \| msgDateFormat('yyyy-mm-dd hh-mi-ss') }}	删除

自定义全局指令

我们想创建一个自动获取焦点的指令，该功能其实可以通过

document.getElementById('search').focus()

来实现，但此处我们专门来介绍下自定义指令的实现方式

1.效果实现

定义全局指令:v-focus

// 定义全局的指令  v-focus
Vue.directive("focus",{
    bind:function(el){

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

    }
})

使用v-focus指令

在这里插入图片描述

效果

在这里插入图片描述

我们可以看到刷新后搜索框获取到了焦点，说明我们创建的v-focus生效了，但是大家肯定也有很多疑问，我们来一一解释下。

2.注意点说明

2.1 指令名称

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

在这里插入图片描述

2.2 参数方法

然后就是我们在定义v-focus指令的时候的第二个参数是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作，那么这几个方法分别是什么含义呢？如下

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

2.3 方法的参数值

我们调用的bind方法或者inserted方法的参数值是怎么设置的。
第一个参数，永远是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 }。