vue-过滤器及键盘修饰符

一、过滤器

1、概念

Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。

2、作用

在我们页面显示值之前加一层过滤，展示我们过滤后的值

3、使用语法

1. {{变量 | 过滤器名}}
2. {{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值。

4、定义语法

1. 全局定义：

                通过Vue提供的filter方法定义：Vue.filter()

                参数：过滤器的名字和过滤器执行函数

                示例：

<div id='app'>
    当前时间是{{ date | dateFormat()}}
</div>
<script>
    Vue.filter('dateFormat', function (data, format) {
    // 日期格式化
    console.log(format);
    // 转成date对象
    let time = new Date(data);
    // 字符串有个方法padStart,通过这个方法我们就可以把位数补到两位
    let y = time.getFullYear();
    // 这里需要注意的地方，月份是从0开始排序的
    let m = (time.getMonth() + 1).toString().padStart(2, '0');
    // getDay应该是获取了星期几
    // getDate获取日期
    let d = time.getDate().toString().padStart(2, '0');
    // console.log(y);
    // console.log(m);
    // console.log(d);
    if (format == 'yyyy-mm-dd') {
        return `${y}-${m}-${d}`;
    } else {
        // 获取时分秒
        let h = time.getHours().toString().padStart(2, '0');;
        let min = time.getMinutes().toString().padStart(2, '0');;
        let secondes = time.getSeconds().toString().padStart(2, '0');;
        return `${y}-${m}-${d} ${h}:${min}:${secondes}`;
    }
})
        const vm = new Vue({
            el: '#app',
            data: {
                date: new Date(),
            },
        })

</script>

        2.私有定义（局部定义）

                filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器。 

        注意事项

                函数的第一个参数都是data，也就是我们要过滤的值。

                过滤器可以自定义一些参数。

                过滤器函数的返回值就是最终显示的值

二、键盘修饰符

1、注册一个监听按键事件

（1）监听所有按键：v-on:keyup

（2）监听指定按键：v-on:keyup.按键码

注意：每个键盘按键都会对应一个键盘码

2、使用按键别名

按键码的使用会使我们的代码可读性降低，所以我们可以使用按键别名（如：监听enter按键：v-on:keyup.enter），其中vue提供的按键别名有：

.enter

.tab

.delete

.esc

.sapce

.up

.down

.left

.right

3、自定义按键别名

当我们需要用到除vue提供了按键别名的按键以外的按键时，可以用以下代码进行自定义别名：

//自定义F1键
Vue.config.keyCodes.f1 = 112