vue4 vue脚手架，过滤器以及键盘修饰符

一， 什么是路由？

1. 后端路由：对于普通的⽹站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源

2. 前端路由：对于单⻚⾯应⽤程序来说，主要通过URL中的hash ( # 号) 来实现不同⻚⾯之间的切换，同时，hash有⼀个特点：HTTP请求中不会包含hash相关的内容；所以，单⻚⾯程序中的⻚⾯跳转主要⽤hash实现；

3. 在单⻚⾯应⽤程序中，这种通过hash改变来切换⻚⾯的⽅式，称作前端路由（区别于后端路由）

二，如何使⽤路由

1. 创建路由new VueRouter(),接受的参数是⼀个对象
2. 在实例化的对象⾥配置属性routes:[],这个数组⾥的对象包含path属性和
   component属性
3. path属性是url的地址,component属性就是显示的组件（传组件的对象）
4. 使⽤
   使⽤ router-link 进⾏⻚⾯间的跳转
   使⽤ router-view 设置所需跳转的⻚⾯在哪⾥显示

三，键盘修饰符

1.注册⼀个监听按键事件

1. 监听所有按键：v-on:keyup
2. 监听指定按键：v-on:keyup.按键码
3. .enter => // enter键
   .tab => // tab键
   .delete (捕获“删除”和“退格”按键) => // 删除键
   .esc => // 取消键
   .space => // 空格键
   .up => // 上
   .down => // 下
   .left => // 左
   .right => // 右

2.⾃定义按键别名

Vue.config.keyCodes.f1 = 112

四，过滤器

过滤器可以⽤在两个地⽅：双花括号插值和 v-bind 表达式

使⽤语法

n {{变量 | 过滤器名}}
n {{变量 | 过滤器 | 另⼀个过滤器}} 可以同时使⽤多个过滤器，后⾯过滤器的data
就是前⾯表达式传过来的值

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

私有定义

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

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

五，⾃定义指令

参数：

1. 指令的名字（定义的时候不加v-,使⽤vue指令的时候加上v-）
2. 对象，⾥⾯包含三个钩⼦⽅法

● bind 只调⽤⼀次，指令第⼀次绑定到元素时调⽤。在这⾥可以进⾏⼀次性的初
始化设置
● inserted 这个元素已经渲染到界⾯上之后执⾏
● update 当元素有更新的时候执⾏

1. 这三个⽅法的参数有哪些

● el：指令所绑定的元素，可以⽤来直接操作 DOM 。
● binding：⼀个对象，包含以下属性：
○ name：指令名，不包括 v- 前缀。
○ value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
● oldValue：指令绑定的前⼀个值，仅在 update 和 componentUpdated钩⼦中
可⽤。⽆论值是否改变都可⽤。