Vue初始（2）过滤器，修饰符

逃离我推掉我的手 2022-12-13 12:44 133阅读 0赞

## Vue初始（2）过滤器，修饰符 ##

#### Vue修饰符 ####

> Vue的修饰符主要针对的是Vue的数据绑定，Vue的事件以及Vue的按键等

1.`lazy`修饰符，这个修饰符是数据绑定的修饰符，它一般配合`v-model`来使用

`v-model`本身是在`input`事件触发的，只要输入就立即触发改变，但是加了`lazy`修饰符以后，则会在`change`事件上面触发

2.`stop`修饰符，它是一个事件修饰符，用于停止事件冒泡传播

> vue一的事件方法内容是可以通过`$event`拿到事件参数，然后再通过事件参数去停止事件冒泡，但是Vue的内部有一个快速的方法去停止事件冒泡

3.`prevent`修饰符，阻止事件的默认行为

> 以前我们也可能通过事件对象里面的`preventDefault()`来阻止事件的默认行为，但是在Vue的内部也可以有更快速的方式

4.`self`修饰符，它是一个事件修饰符，事件在触发的时候必须是触发者与绑定者一致

> 上面的代码中`self`修饰符的作用就是用于在当前元素上面触发自己的事件才有用，其它元素传播过来的事件行为我不处理

5.`once`修饰符，它是一个事件修饰符，代表当前事件方法只会执行一次  
6.`capture`修饰符，它是一个事件修饰符，代表当前事件执行是事件捕获  
7. `left`修饰符，它是按键修饰符，代码鼠标的左键按下  
8. `middle`修饰符，它是按键修饰符，代码鼠标中间的键按下  
9. `right`修饰符，它是按键修饰符，代表鼠标的右键按下

11.`enter`，`.tab`，`.delete` (捕获“删除”和“退格”键)，`.esc` `.space`,`.up`,`.down`,`.left`,`.right`。按键修饰符主要作用于`keydown`与`keyup`事件  
12.`exact`修饰符允许你控制由精确的系统修饰符组合触发的事件

<button type="button" @click.exact="a">按钮1</button>
    
    
    <button type="button" @click.ctrl.exact="a">按钮2</button>

## Vue过滤器 ##

Vue里面的过滤器其它可以把它理解数据格式化工具，过滤器分为全局过滤器与局部过滤器

#### 全局过滤器 ####

全局过滤器通过`Vue.filter`这个方法去注册，它只要注册好以后可以在任何地方进行调用

<body>
        <div id="app">
            <h2>{ { msg | formatMsg(15)}}</h2>
            <hr>
            <h2>{ { birthday |formatDateTime}}</h2>
        </div>
    </body>
    <script src="./js/vue.js"></script>
    <script>
        // 全局过滤器
        Vue.filter("formatMsg", (txt,length) => { 
            //txt就代表我们要格式化的值
            if (txt) { 
                return txt.length > length ? txt.substr(0, length) + "..." : txt;
            } else { 
                return "";
            }
        });
        Vue.filter("formatDateTime", d => { 
            if (d && d instanceof Date) { 
                let year = d.getFullYear();
                let month = (d.getMonth() + 1).toString().padStart(2, 0);
                let date = d.getDate().toString().padStart(2, 0);
                let hour = d.getHours().toString().padStart(2, 0);
                let minute = d.getMinutes().toString().padStart(2, 0);
                let second = d.getSeconds().toString().padStart(2, 0);
                return [year, month, date].join("-") + " " + [hour, minute, second].join(":");
            } else { 
                return "";
            }
        });
        new Vue({ 
            el: "#app",
            data: { 
                msg: "你好啊 ，我叫杨标，很高兴认识大家"
            }
        })
    </script>

`Vue.filter`里面，第一个参数代表过滤器的名称，第二个参数代表过滤器执行的回调，在这个回调函数里面，回调函数的第一个参数指要格式化的值，后面再接的参数就是正常的函数的参数

上面的代码中就定义了两个格式化的过滤器，一个是`formatMsg`，另一个是`formatDateTime`

#### 局部过滤器 ####

方法与作用跟全局过滤器是一样的，只是定义的方法不一样，全局过滤器是通过`Vue.filter`这个方法来完成定义的，而局部过滤器则是在Vue的内部来完成的

<body>
        <div id="app">
            <h2>{ { msg |formatMsg(10)}}</h2>
            <hr>
            <h2>{ { birthday |formatDateTime}}</h2>
        </div>
    </body>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({ 
            el: "#app",
            data: { 
                msg: "你好啊 ，我叫杨标，很高兴认识大家",
                birthday: new Date()
            },
            // 定义局部过滤器
            filters: { 
                formatMsg(txt,length) { 
                    //txt就代表我们要格式化的值
                    if (txt) { 
                        return txt.length > length ? txt.substr(0, length) + "..." : txt;
                    } else { 
                        return "";
                    }
                },
                formatDateTime(d) { 
                    if (d && d instanceof Date) { 
                        let year = d.getFullYear();
                        let month = (d.getMonth() + 1).toString().padStart(2, 0);
                        let date = d.getDate().toString().padStart(2, 0);
                        let hour = d.getHours().toString().padStart(2, 0);
                        let minute = d.getMinutes().toString().padStart(2, 0);
                        let second = d.getSeconds().toString().padStart(2, 0);
                        return [year, month, date].join("-") + " " + [hour, minute, second].join(":");
                    } else { 
                        return "";
                    }
                }
            }
        });
    </script>

局部过滤器是在Vue的对象内部通过`filter`来实现定义的

## Vue中的DOM操作 ##

Vue使用的是数据驱动页面，它不推荐我们使用DOM操作，但是并不代表它不能使用DOM操作  
要使用DOM操作，则并须要获取DOM元素，VUE不推荐使用之前任何的方式去获取DOM元素，也就是`document.querySelector`等 操作

Vue中获取操作DOM元素的方式主要有两种，

1.  第一种是通过事件`$event`获取当前的事件绑定者
2.  通过Vue提供的`$ref`属性来获取

<body>
        <div id="app">
            <h2 ref="pageTitle">这是一个2号标题</h2>
            <button type="button" @click="abc($event)">按钮</button>
        </div>
    </body>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({ 
            el:"#app",
            methods:{ 
                abc(event){ 
                    //通过这种方式可以获取到事件绑定者
                    console.log(event.currentTarget);
                    console.log(this.$refs.pageTitle);
                }
            }
        })
    </script>

在托管区域的内部 ，可以给一个DOM元素添加`ref="值"`，然后在Vue的内部进行操作的时候则可以使用`this.refs.值`来选择这个DOM元素来进行操作