事件处理、事件修饰符（详细）
目录
一、事件处理
二、事件修饰符
1.prevent 阻止默认事件（常用）
2.stop：阻止事件冒泡（常用）
3.once：事件只触发一次（常用）
4.capture：使用事件的捕获模式
5.self：只有event.target是当前操作的元素时才出发的事件
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕
三、键盘事件
事例
编辑
1.Vue中最常用的案件别名：
一、事件处理
事件的基本使用：
使用v-on：xxx 或 @xxx绑定事件，其中xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，不用箭头函数！否则this就不是vm了
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
@click="demo" 和 @click=“demo（$event）”效果一致，但后者可以传入参数
初识vue
欢迎来到{{name}}学习
二、事件修饰符
1.prevent 阻止默认事件（常用）
欢迎来到{{name}}学习
点我提示信息
在我们之前学过的标签中，如果我们在页面中点击a标签所呈现出来的效果，我们的页面立马会跳转到href页面，但是我们可以阻止其页面跳转
出现下面这个页面，当我们点击确定之后，发现页面并没有跳转
2.stop：阻止事件冒泡（常用）
正常情况下，当我们点击按钮的时候会出现两次弹窗（就我们上面这个代码而言），但是在实际操作中并没有出现两次弹窗（冒泡） ，原因就是@click.stop。当我们使用时，就阻止事件冒泡，我们点击按钮时，仅仅会出发按钮的弹窗，并不会触发div的弹窗。
3.once：事件只触发一次（常用）
我们单击按钮的时候，通常情况下不论我们点击几次，都会出现弹框，但是当我们加了@click.once之后，这个按钮只能单击一次，第二次及其以后不再出现弹窗
4.capture：使用事件的捕获模式
div1
div2
正常情况下， 是先捕获再冒泡，例如上面正常的代码中先捕获box1再捕获box2，之后box2冒泡再box1冒泡，控制台上先输出2再输出1
但是我们添加了@click.capture之后，我们会发现当我们在捕获box1的时候，也完成了box1的冒泡，最终控制台上的输出内容是先1再2
5.self：只有event.target是当前操作的元素时才出发的事件
正常情况下不加.self的时候，当我们单击按钮，会打印出两个
当我们添加.self的，我们再点击按钮，只会出现一个，那就是按钮所绑定的函数运行，上面那个div便不会再运行（这个.self也可以说变相的阻止了冒泡）
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕
下面这个，只要滚动条动，就能触发函数
下面这个，只要鼠标的滚轮动，就能触发函数
触发流程：先滚动滚轮-->触发demo函数--->demo函数完成后再触发滚动条滚动效果
在我们下面这个代码后加了passive，当我们的demo函数没有执行完时，滚轮也会滑动
三、键盘事件
事例
初识vue
欢迎来到{{name}}学习
1.Vue中最常用的案件别名：
回车 enter
删除 delete（捕获“删除delete”和“退格backspace”键）
退出 esc
空格 space
换行 tab （特殊，必须配合keydown去使用，@keydown.tab）
上 up
下 down
左 left
右 right
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转化为kebab-case（短横线命名，两个不同的单词之间用短横线连接）
系统修饰键（用法特殊）：ctrl、alt、shift、meta（win键）
①配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
②配合keydown使用：正常触发事件