Vue 核心之事件处理

一、事件的基本用法

1、使用 v-on：xxx 或 @xxx 绑定事件，其中 xxx 是事件名

2、事件的回调需要配置在 methods 对象中，最终会在 vm 上

3、methods 中配置的函数，不要用箭头函数，否则 this 就不是 vm 了

4、methods 中配置的函数，都是被 Vue 所管理的函数，this 的指向是 vm 或组件实例对象

5、@click=“demo” 和 @click=“demo($event)” 效果一致，后者可以传参

二、事件修饰符

Vue 中的事件修饰符

        1、prevent        阻止默认事件

        2、stop             阻止事件冒泡

        3、once            事件只触发一次

        4、capture        使用事件的捕获模式

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

        6、passive        事件默认行为立即执行，无需等待事件回调执行完毕

修饰符可以连续写，可以这么用：@click.prevent.stop=“showInfo”

三、键盘事件

键盘上的每个按键都有自己的名称和遍码，而 Vue 还对一些常用按键起了别名方便使用

1、Vue 中常用的按键别名

        回车        enter

        删除        delete 捕获 “删除” 和 “退格” 键

        退出        esc

        空格        space

        换行        tab 特殊，必须配合 keydown 去使用

        上            up

        下            down

        左             left

        右             right

2、Vue 未提供别名的按键，可以使用按键原始的 key 值去绑定，但注意要转为 kebab-case

3、系统修饰键（用法特殊）ctrl  alt  shift  meta （meta 就是 win 键）

        1、配合 keyup 使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发指定 ctr+y 使用 @keyup.ctr.y

        2、配合 keydown 使用：正常触发事件

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

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