vue 事件处理 (事件修饰符、键盘事件、滚动事件 )

data中的数据才会有数据劫持和数据代理 vm 中setter和getter

1.Vue中的事件修饰符

可以同时使用多个 例：@click.stop.prevent

1.prevent: 阻止默认事件 (常用) 

2.stop: 阻止事件冒泡(常用)

3.once: 事件只触发一次(常用)

4.capture:使用事件的捕获模式

5.self: 只有event.target是当前操作的元素是才触发事件

6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕，移动端较多使用

2.键盘事件

@keydowm 按下键盘事件     @keyup抬起键盘触发事件

e.keycode 键盘事件编码     e.key 键盘事件名称

1.Vue中常用的按键别名

回车 => enter （@keyup.enter ）

删除 => deLete (捕获“删除”和“退格”键)

退出 => esc

空格 =>space

换行 => tab （必须配合keydowm使用 @keydowm.tab ）

上 => up

下 => down

左 => left

右 =>right

2.Vue未提供别名的按键

可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)

3.系统修饰键 (用法特殊) : ctrl、alt、shift、meta(windows)

(1).配合keyup使用: 按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用: 正常触发事件。

4.使用keyCode去指定具体的按键 (不推荐，某些浏览器已废弃)

@keyup.13

5.定制按键别名

Vue.config.keyCodes.自定义键名 = 键码

Vue.config.keyCodes.huiche = 13 
结果： @keyup.huiche == @keyup.enter == @keyup.13

6.系统修饰键可以设置同时点击多个

@keyup.ctrl.y

3.滚动事件

1.@scroll 滚动条滚动触发

2.@wheel鼠标滚轮滚动触发