一、事件修饰符
- 按键别名
- 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:==销毁之后
