Vue学习笔记 - 基础知识[3] 事件处理

事件处理

事件的基本使用

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

事件修饰符

1. prevent：组织默认事件（常用）；
2. stop：组织事件冒泡（常用）；
3. once：事件只触发一次（常用）；
4. capture：使用事件的捕获模式；
5. self：只有 event.target 是当前操作的元素时才触发事件；
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

键盘事件

Vue中常见的按键别名

回车 => enter
删除 => delete （捕获 “删除” 和 “退格” 键）
退出 => esc
空格 => space
换行 => tab
上 => up
下 => down
左 => left
右 => right

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

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

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

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

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