———————————-(VUE叁)————————————-

过滤器、键盘修饰符、自定义指令、生命周期=>Day8_8笔记总结

一.过滤器

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生命周期图