4、事件修饰符、过滤器、自定义指令、生命周期

一、事件修饰符

• 按键别名
• enter 回车 delete 删除键 esc取消键 space 空格键

<script>
export default {
  name: "KeyUp",
  methods:{
    keyUp(e){ console.log(e) }
  },
  skip(){
      window.location.href = "http:www.xx.com"
  }
}
</script>
<template>
  <div>
    <input type="text" @keyup="keyUp">
    <input type="text" @keyup.65="keyUp">
    <input type="text" @keyup.m="keyUp">
    <input type="text" @keyup.m.n="keyUp">//可以链式
    <input type="text" @keyup.enter="skip">//enter键可以跳转
  </div>
</template>

• 自定义按键别名
  • 定义：Vue.config.KeyCodes.m = 77
  • 在之前低版本要先在main.js 里面自定义以后，才可以用，先在不需要了

二、过滤器

==过滤时间的插件：https://momentjs.cn/==先下载，再引入

• 下载时有 --save 会放在 package.json 里面的"dependencies"里，运行时和发布时都要用，"devDependencies"这里面只有再运行时会用得到

1、作用：常见的文本格式化

2、使用的地方：

• 插值表达式
• v-bind表达

3、怎么使用： |管道符

4、全局声明：

Vue.filter(){'过滤器的名字',回调函数 function(data:管道符前面的数据,format:传递过来的数据){ }}

• 再main.js中写的

<script>
export default {
  name: "filterView",
  data(){
    return{ msg:'你游戏玩的真好，太厉害了' }
  }
}
</script>
<template>
  <div>
    {{ msg }}
    <div></div>
    {{msg | setMsg(7777)}}
  </div>
</template>

• main.js中写的

5、私有的：

• 和data、methods平级
  filters:{过滤器的名字(data:管道符前面的数据,format:传递过来的数据){ }}
  补充：padStart()、 padEnd()
• padStart()
• 这个方法里两个参数，显示的位数，位数不足时在前面显示的内容
• padEnd()
  • 这个是和上面一样，在后面补一个值

三、自定义指令

• vue.directive

1、全局定义

• vue.directive('自定义的名字',{只调用一次: bind(el:绑定的元素,binding:信息对象){},元素渲染之后执行:inserted(){},更新:update(){}})
• v-自定义指令的名字

2、私有定义

• directives:{1、自定义指令的名字(){} 2、自定义指令名字:{只调用一次:bind(el:绑定的元素,binding:信息对象){},元素渲染之后执行:inserted(){},更新:update(){}}}

四、生命周期

• 从Vue实例创建 => 运行 => 销毁 ，伴随着各种各样的事件，这些事件，统称为生命周期。

8个生命周期

• ==beforeCreate:==初始化之前，data和methods中的数据还没有初始化。页面重定向
• ==created:==初始化之后，data和methods中的数据已经初始化，第一个可以操作data和methods中数据的生命周期。数据初始化，接口请求。
• ==beforeMount:==虚拟的DOM挂载。
• ==mounted:==真实的DOM挂载，第一个可以操作DOM元素的生命周期
• ==beforeUpdate:==更新之前，页面中的数据是旧的，data中的数据是新的，尚未保持一致。(执行0次或者无数次)
• ==undated:==更新之后，页面和data中的数据都是新的。(执行0次或者无数次)
• ==beforeDestroy:==销毁之前，清空定时器和页面监听
• ==destroyed:==销毁之后