Vue学习之自定义指令

系统管理员 2021-11-30 01:12 248阅读 0赞

# Vue自定义指令 #

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./lib/vue-2.4.0.js"></script>
        <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
    </head>
    <body>
        <div id="app">
            
            
            <div class="panel panel-primary">
                  <div class="panel-heading">
                        <h3 class="panel-title">品牌管理</h3>
                  </div>
                  <div class="panel-body form-inline">
                        <label>
                        Id:
                        <input type="text" class="form-control" v-model="id" >
                        </label>
                
                        <label>
                        Name:
                        <input type="text" class="form-control" v-model="name" @keyup.f2='add'>
                        </label>
                
                        
                        <input type="button" value="添加" 
                            class="btn btn-primary" @click='add'>
    
                        <label>
                            搜索名称关键字：
                            <input type="text" class="form-control" v-model="keywords">
                        </label>    
                  </div>
            </div>
            
            
            
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>name</th>
                        <th>cTime</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in search(keywords)" :key="item.id">
                        <td>{
       {item.id}}</td>
                        <td>{
       {item.name}}</td>
                        <td>{
       {item.ctime | msgDateFormat('yyyy-mm-dd hh-mi-ss') }}</td>
                        <td><a href="" @click.prevent="del(item.id)">删除</a></td>
                    </tr>
                </tbody>
            </table>
            
            
            
        </div>
        <script>
            // 定义一个全局按键修饰符
            Vue.config.keyCodes.f2=113
            var vm = new Vue({
                el: "#app",
                data: {
                    id:'',
                    name:'',
                    keywords:'',
                    list:[
                        {id:1,name:'奔驰',ctime:new Date()},
                        {id:2,name:'宝马',ctime:new Date()}
                    ]
                },
                methods: {
                    add(){
                        // 添加记录到list中
                        this.list.push({id:this.id,name:this.name,ctime:new Date()})
                        // 将输入框置空
                        this.id=this.name=''
                    },
                    del(id){
                        // some方法循环数组,返回true可以终止循环
                        // this.list.some((item,i) =>{
                         //   if(item.id == id){
                                // 移除记录 1 移除一条记录
                         //       this.list.splice(i,1);
                                // 返回true 终止循环
                          //      return true;
                          //  }
                        //}) 
                        // 通过findIndex方法获取要删除记录的index
                        var index = this.list.findIndex(item => {
                            if(item.id == id){
                                return true
                            }
                        })
                        // 通过splice方法来移除记录
                        this.list.splice(index,1);
                    },
                    search(keywords){
                        // 保存新的数组
                       // var newList = []
                       // this.list.forEach(item => {
                            // 判断循环的记录是否包含的查询的关键字
                           // if(item.name.indexOf(keywords) != -1){
                                // 将循环的记录添加到新的数组中
                             //   newList.push(item)
                          //  }
                      //  })
                        // 返回数组信息
                       // return newList
                      // filter 过滤  返回满足条件的数组
                      return  this.list.filter(item => {
                           // includes 是否包含
                           if(item.name.includes(keywords)){
                                return item
                           }
                       })
                    }
                },
                filters:{ // 通过局部过滤器来实现
                    msgDateFormat:function(msg,pattern=''){
                        // 将字符串转换为Date类型
                        var mt = new Date(msg)
                        // 获取年份
                        var y = mt.getFullYear()
                        // 获取月份 从0开始 
                        var m = (mt.getMonth()+1).toString().padStart(2,"0")
                        // 获取天数
                        var d = mt.getDate();
                        if(pattern === 'yyyy-mm-dd'){
                            return y+"-"+m+"-"+d
                        }
                        // 获取小时
                        var h = mt.getHours().toString().padStart(2,"0")
                        // 获取分钟
                        var mi = mt.getMinutes().toString().padStart(2,"0")
                        // 获取秒
                        var s = mt.getSeconds().toString().padStart(2,"0")
                        // 拼接为我们需要的各式
                        return y+"-"+m+"-"+d+" "+h+":"+mi+":"+s
                    }
                }
            })
        </script>
    </body>
    </html>

## 自定义全局指令 ##

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

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指令

![在这里插入图片描述][20190717180550953.png]

效果

![在这里插入图片描述][20190717180631317.gif]

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

### 2.注意点说明 ###

#### 2.1 指令名称 ####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]

#### 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 }。

#### 2.4 什么场景下调用什么方法 ####

上面介绍的各个方法在什么场景下调用呢？记住如下原则即可。

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

### 3.小案例 ###

添加一个设置颜色属性的指令v-color

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]

效果

![在这里插入图片描述][20190717182345859.gif]

**传参使用**  
我们系统指令能够动态的接收数据来改变

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5]

## 自定义私有指令 ##

和前面介绍的过滤器一样，全局指令其他的vm对象都可以共享，我们也可以为每个vm对象创建私有的指令，如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 6]

为使用v-fontweight之前效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 7]  
使用之后

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 9]

### 函数简写 ###

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 11]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 12]

[20190717180550953.png]: /images/20211129/2ee8f99ac88e497da6653b873da0c46d.png
[20190717180631317.gif]: /images/20211129/0971944cf28a44f5be227df9575093ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20211129/63a4e80cc8c6431ca276b348eee1b34b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: /images/20211129/829d15a3fb12454db79f2aff059469df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]: /images/20211129/1a8daa7a72e044afbad7249b1396ddd2.png
[20190717182345859.gif]: /images/20211129/2ce18b7899734310bd72aa9822c99f76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]: /images/20211129/b515278c957a4419ad45d35b9662c60e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]: /images/20211129/f033ccd03e144e3d92f7273e61ee8fb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5]: /images/20211129/779c6a0562df495da49aa26c2ea47dd7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 6]: /images/20211129/bf9085c49f544ce288194f32343826da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 7]: /images/20211129/a1db5239f59e4a6589beac5e576aca77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 8]: /images/20211129/a1e89ad1daf04302bdcd9f70b23fee7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 9]: /images/20211129/b262c481a97e42409baeb8fb58da5f3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 10]: /images/20211129/63dc461c87fc419b9301ff72a9895025.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 11]: /images/20211129/fe92b064a22c4af8802798dbb0df4611.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 12]: /images/20211129/079b8fc2ce584a9caad4f94152c31d21.png