这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战
前言
今天我们继续复习vue知识，我们一起来回顾一下vue的过滤器、键盘修饰符、自定义指令、生命周期（部分）。这里涉及到许多全局定义和局部定义的内容，以及他们的作用，大家也可以趁着两分钟看一看，巩固一下。
过滤器、键盘修饰符、自定义指令、生命周期总结
一.过滤器
1.全局过滤器:
相当于是Prototype
原型变量：是所有的这一类型的实例共享，任意一个实例改变这个变量，所有的实例的这个变量会同步发生变更，所以通常protype只用来定义常量或者方法 构造函数里头的成员变量：是实例所独有的
1.1)定义
/*** 全局范围来定义*/
Vue.filter('formatDate', function(value, pattern = 'yyyy-MM-dd'){
return value.format(pattern)
})
1.2)使用：
① |表示管道符用来表示我即将使用过滤器 formatDate的第一个参数固定就是管道符前面的值
② 全局和局部都有的情况，那么优先调用局部的
<h1>{{date}}</h1>
<h1>{{date|formatDate}}</h1>
<h1>{{date|formatDate('yyyy-MM-dd hh:mm:ss S')}}</h1>
2.局部过滤器:
局部：filters 跟el data methods是同级别的属性
filters:{
// 日期格式过滤器
formatDate (value, pattern = 'yyyy-MM-dd') {
return value.format(pattern);
}},
二.键盘修饰符
1.概念与作用:
相当于是event.keycode来绑定按键事件 onclick onscroll ondblclick 都是鼠标事件.... keyup keydown keypress(keydown + keyup) 键盘修饰符是给上述三类key做绑定用的。
2.定义键盘修饰符:
//键盘修饰符定义 定义回车并且去f2别名
Vue.config.keyCodes.f2 = 113;
3.使用
<input @keyup.f2="test('回车事件')">
三.自定义指令
原生指令 就是由vue提供的指令 自定义指令 用户自己定义的指令
1. 三种指令定义方式与区别:
3.1) bind :
最早发生的是bind 绑定关系发生在内存中
bind:function(el){// 表示绑定的时候就起作用
// 不需要强制要求dom已经显示在页面的场景 // 绑定class style},
3.2) inserted :
绑定好之后的结构，插入到文档流，这个时候是inserted
inserted: function(el){// 表示被vue绑定关系之后的视图第一次插入到文档流中起作用
// 一般是需要dom已经显示在页面而非内存的场景使用},
3.2) updated :
绑定关系的m v发生变更了，会引起updated
updated: function(el){// 表示每次v层变或者m层变，都会起作用}
2.全局指令与局部指令的定义与使用
2.1) 全局指令 => directive
Vue.directive('focus',{
/*** 插入时候生效
* @param el 表示被指令作用的元素 dom对象 */
inserted: function(el){
el.focus() }})
2.2) 局部指令 => directives
2.3)指令的使用
v-+指令的名称==>v-focus
<h1 v-color="'green'">bind</h1>
四.生命周期
4.1)Vue四个生命周期
下述四个生命周期都没有xx中的过程，是因为本身在每个生命周期阶段xx中，表示的是vue正在执行的过程，那么如果这个时候穿插进来用户主观的行为，会破坏当前正在执行的任务
beforeCreate: function(){ // 创建前
console.log('beforeCreate,date:' + this.date)
},
created: function(){// 创建后
console.log('created,date:' + this.date)
},
beforeMount: function(){//渲染前
console.log('beforeMout')
},
mounted: function(){// 渲染后
console.log('mounted')
},
beforeUpdate: function(){// 更新前
console.log('beforeUpdate')
},
updated: function(){// 更新后
console.log('updated')
},
beforeDestroy: function(){// 销毁前
console.log('beforeDestroy, date' + this.date)
},
destroyed: function(){// 销毁后
console.log('destroyed' + this)
}
4.2)Vue生命周期图
来源于www.jianshu.com/p/672e967e2… 的图示
