vue过滤器和修饰符

day02

---

一、本章任务

1、学习vue的过滤器
2、学习按键修饰符
3、自定义vue的指令

二、本章目标

1、掌握如何创建并使用vue的过滤器
2、掌握如何创建并使用vue按键修饰符
3、掌握如何创建并使用vue的指令

三、知识点

1.过滤器

	过滤器可以用在两个地方：mustache插值和v-bind表达式。
	作用：在页面显示值之前加一层过滤，展示过滤后的值
	使用语法：
		=>{{变量|过滤器名}}
		=>{{变量|过滤器|另一个过滤器}}   可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值

	定义语法
		=>全局定义
		通过Vue提供的filter方法定义：Vue  filter（）
		参数：过滤器的名字或过滤器执行函数

示例：

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}`;
    }
})

	=>私有定义
	filter这个是实例化Vue的一个参数，和data，methnods平级，里面放的就是我们这个示例的私有过滤器。

示例：

new Vue({
    el: '#app',
    filters: {
        dateFormat(data, format) {
            ...
        }
    }
});

	注意：
	1、函数的第一个参数都是data，也是我们要过滤的值
	2、过滤器可以自定义一些参数
	3、过滤器函数的返回值就是最终显示的值

2.键盘修饰符

1、 注册一个鉴定按键时间
	=>监听所有按键：v-on:keyup
	=>监听指定按键：v-on:keyup.按键码
	注意：每个按键都会对应一个按键码，可以参照按键码对应网站
2、使用按键别名
	=>vue提供的按键名
		.enter
		.tab
		.delete(捕获“删除”“退格”键
		.esc
		.space
		.up
		.down
		.left
		.right
	=>自定义按键别名

如何使用v-on:keyup按键别名？
监听enter按键;v-on:keyup.enter

自定义按键别名
Vue.config.keyCodes.f1 = 112

3.自定义指令

	1、全局定义
		Vue.directive()
		参数：
		1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）
		2. 对象：里面包含三个钩子方法
		 	=>bind只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置
		 	=>inserted：这个元素已经渲染到界面上之后执行
		 	=>update：当元素有更新的时候执行
		 三个方法的参数
		 	=>el：指令所绑定的元素，可以用来直接操作DOM
		 	=>binding：一个对象，包含以下属性
		 	=>name：指令明，不包括 v- 前缀
		 	=>value:指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
		 	=>oldValue：指令绑定的前一个值，仅在 update 和componentUpdated

示例：

// html内容
<div v-color="'#000'+'333'">你好</div>

// js内容
Vue.directive('color', {
    // 这个三个方法第一个参数都是el，原生的dom对象
    // vue检测到指令绑定到界面元素的时候会执行这个方法
    bind(el, bind) {
        // 这些样式就相当于我们这个元素属性
        el.style.color = bind.value;
    },
    // 当我们这个元素插入到dom树的时候，会调用这个方法
    // 在执行这个方法的时候界面上的元素已经显示出来
    inserted(el) {

    },
    // 当组件进行更新的时候会调用这个方法
    update(el) {

    }
})

2、私有定义
实例里有个directive属性，这个属性是个对象
里面放的使我们的指令，这个对象就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的
简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的。

示例：

var vm = new Vue({
    el: '#app',
    directives: {
        color(el, bind) {
            el.style.color = 'blue';
        },
        focus: {
            inserted(el) {
                el.focus();
            },
            bind(el) {

            },
            updated() {

            }
        }
    }
})

---

总结

以上就是今天学习总结的学习内容！！！！！！！