可以使用“v-on:事件名称”或“@事件名称”绑定事件
注
- 事件的回调函数需要配置在 methods 对象中,最终才会出现在 VM 上
- methods 中配置的函数,不要使用箭头函数,否则 this 不是 VM
- 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