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

Vue修饰符

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

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

<input type="text" v-model.lazy="msg">
<hr>
<h2>{
    
    {
    
    msg}}</h2>

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

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

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

<div class="box" @click="a">
    <button type="button" @click.stop="b">按钮</button>
</div>

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

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

<a href="http://www.baidu.com" @click.prevent="a">百度</a>

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

<div class="box" @click.self="a">
    <button type="button">按钮</button>
</div>

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

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

<div class="box" @mousedown.left="b">左键触发</div>
<div class="box" @mousedown.middle="b">中键触发</div>
<div class="box" @mousedown.right="b">右键触发</div>

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

 <!-- 仅仅只有click才能触发 -->
<button type="button" @click.exact="a">按钮1</button>

<!--只有ctrl+click才能触发  -->
<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元素的方式主要有两种，

第一种是通过事件$event获取当前的事件绑定者
通过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元素来进行操作