事件绑定

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情juejin.cn/post/714765…

事件监听

• 使用v-on 指令来绑定并监听DOM事件并触发javascript代码，绑定的内容可以是一个当前实例上的方法(后面无需跟括号)或一个内联表达式。如果提供的是个方法，则原生的 DOM event会被作为第一个参数传入，同时这个event 会带有 target 属性，指向触发该事件的相应的ViewModel。 @click="sum+1"

v-on：后面是个函数的话，也会接收到一个事件对象，事件对象写法是$event，在调用函数的时候写，并且只能作为第一个参数，也只能叫$event，是固定写法，叫别的不行。

那么v-on:可以绑定哪些事件？

只要是原生js里有的事件都可以用它绑定。

事件修饰符

原生的event.perventDefault()写在事件函数里，但是vue提供了更简单的方法，就是————

1. .stop 阻止事件冒泡
2. .prevent 阻止默认事件
3. .captrue 捕获模式
4. .self 元素本身触发，加了该修饰符，点击谁就谁触发事件，它既不冒泡也不捕获了。
5. .once 只触发一次（2.）
6. passive 是滚动事件停止的时候才会执行，不能有.prevent一起使用,否则.prevent不生效

• 以上几个只能用在v-on绑定的事件里。他们的用法是紧跟事件名。
• 例如@click.once="函数名"

鼠标按钮修饰符

用法：直接在事件名后面写，可以和事件修饰符一起使用，使用时也是直接使用。

1. .left左击时生效
2. .right右击时生效
3. .middle滚轮点击时生效 这些修饰符会限制处理函数仅响应特定的鼠标按钮。

按键修饰符

• 在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on在监听键盘事件时添加按键修饰符例：<input type="text" v-on:keyup.65='nh()”>
• 当键盘按键"a"抬起是触发方法，按键修饰符使用键盘码(keycode)来进行表示。65即表示按键a .excat 指定精准匹配，只能按指定键才会触发，多按或者少按都不会触发

1. .enter
2. .tab
3. .delete(捕获“删除”和“退格”键)
4. .esc
5. .up
6. .space
7. .down
8. .left
9. .right