学习vue的第三天-CSDN博客

本文链接：https://blog.csdn.net/Kuala_/article/details/125915087

本文详细介绍了Vue中的事件处理机制，包括事件绑定、事件修饰符如`prevent`、`stop`、`once`等的使用，以及键盘事件监听。同时，讲解了计算属性的概念，如何定义和使用计算属性，特别是其依赖跟踪机制，以及计算属性在模板中的应用。文中还提及了Vue自定义按键别名和系统修饰键的配合使用。

摘要由CSDN通过智能技术生成

事件处理

事件绑定

用$event 给event占个位

事件修饰符

prevent:阻止默认事件（常用）
stop：阻止事件冒泡（常用）
once：事件只能触发一次（常用）
capture：使用事件的捕获模式（从外往内）
self：只有event.target是当前操作的元素时才触发事件
passive：事件的·默认行为立即执行，无需等待事件回调执行完毕

键盘事件

keyup：鼠标按下再弹起触发
keydown：鼠标按下即触发

vue中常用的按键别名：

回车=>enter
删除=>delete
退出=>esc
空格=>space
换行=>tab
上=>up
下=>down
左=>left
右=>right

vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为keyab-case（短横线命名）

系统修饰键（用法特殊）：ctrl、alt、shift、meta

配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才触发
配合keydown使用：正常触发事件

也可以使用keyCodes去指定具体的按键（不推荐）

Vue.config.keyCodes.自定义键名 = 键码，可以去定制别名

计算属性

定义：要计算的属性不存在，要靠已有的属性计算得来
原理：底层借助了Object.defineproperty方法提供的getter和setter
get函数什么时候执行：

初次读取时会执行一次

当前依赖的数据发生变化时会被再次调用

模板：

computed:{
fullName:{
get(){
return this.firstName + '-' + this.lastName
},
set(value){
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}