八、事件处理

（一）事件的基本使用

• 使用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名
• 事件的回调需要配置在 methods 对象中，最终会在 vm 上
• methods 中配置的函数，不要用箭头函数，否则 this 就不再是 vm
• methods 中配置的函数，都是被 Vue 所管理的函数，this 的指向是 vm 或 组件实例对象
• @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参

（二）事件的修饰符

• 修饰符可以连着写多个

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

（三）键盘事件

1.常用的按键别名

中文	别名
回车	enter
删除	delete（捕获“删除”和“退格”键）
退出	esc
空格	space
换行	tab（特殊：必须配合 keydown 使用）
上	up
下	down
左	left
右	right

2.未提供别名

• Vue 未提供别名的按键，可以使用按键原始的 key 值 event.key 去绑定
• 但注意要转为 kebab-case（短横线命名）
• 如：

中文	别名
CapsLock	caps-lock

3.系统修饰键（用法特殊）

• 系统修饰键包括
  • Ctrl
  • Alt
  • Shift
  • Meta

1）配合 keyup 使用

• 按下修饰键的同时，再按下其他键，随后释放其他键，事件才能被触发

2）配合 keydown 使用

• 正常按键即可触发事件

4.keyCode

• 也可以使用 keyCode event.keyCode 指定具体的按键（不推荐）

5.自定义按键别名

• 使用 Vue.config.keyCodes.自定义键名 = 键码 可以定制按键别名