Vue事件

可以使用“v-on:事件名称”或“@事件名称”绑定事件

注

1. 事件的回调函数需要配置在 methods 对象中，最终才会出现在 VM 上
2. methods 中配置的函数，不要使用箭头函数，否则 this 不是 VM
3. methods 中配置的函数，被 Vue 管理所以 this 都是指向 VM 或者组件实例对象

事件修饰符

修饰符是由点开头的指令后缀来表示的

.stop

阻止单击事件继续传播

<a v-on:click.stop="doThis"></a>

.prevent

提交事件不再重载页面

<form v-on:submit.prevent="onSubmit"></form>

.capture

添加事件监听器式使用事件捕获模式（内部元素触发的事件先在此处理，然后才交给内部元素进行处理）

<div v-on:click.capture="doThis">...</div>

.self

只当在 event.target 是当前元素自身时触发处理函数（事件不是从内部元素触发的）

<div v-on:click.self="doThat">...</div>

.once

点击事件只会触发一次

<a v-on:click.once="doThis"></a>

.passive

滚动事件的默认行为会立即触发，不会等待事件的回调

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

按键修饰符

按下键盘的某个键时触发事件

• .enter：回车
• .tab
• .delete：(捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down

鼠标按钮修饰符

• .left
• .right
• .middle