事件处理

事件绑定

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

事件修饰符

1. @click.prevent：阻止事件的默认行为 event.preventDefault()
2. @click.stop : 停止事件冒泡 event.stopPropagation()
3. @click.one：事件只触发一次
4. @click.capture：使用事件的捕获模式
5. @click.self：只有 event.target 是当前操作的元素时才触发事件
6. @click.passive：事件的默认行为立即执行，无需等待事件回调执行完毕（先动作，再执行函数）

修饰符可连续写如 @click.one.prevent

按键修饰符

1.keycode : 操作的是某个 keycode 值的键

2.keyName : 操作的某个按键名的键(少部分)

• 常用的按键别名：

回车 => 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[自定义键名] = 键码，定制按键别名