在前几篇文章中，我们学习了指令与过滤器。本篇将介绍 事件处理，重点包括 v-on、事件修饰符以及键盘事件。

事件绑定 v-on

Vue 使用 v-on（缩写 @）来监听事件。

<div id="app"><button v-on:click="sayHello">点我</button><button @click="count++">计数：{{ count }}</button>
</div><script>
new Vue({el: '#app',data: {count: 0},methods: {sayHello: function () {alert('Hello Vue!')}}
})
</script>

事件修饰符

Vue 提供了许多修饰符，简化事件处理逻辑。

<div id="app"><!-- 阻止冒泡 --><button @click.stop="doThis">点我不会冒泡</button><!-- 阻止默认行为 --><form @submit.prevent="onSubmit"><button type="submit">提交</button></form><!-- 只触发一次 --><button @click.once="sayHello">只触发一次</button>
</div><script>
new Vue({el: '#app',methods: {doThis() {console.log('点击了按钮')},onSubmit() {console.log('表单提交')},sayHello() {console.log('你好')}}
})
</script>

常见修饰符：

.stop：阻止冒泡
.prevent：阻止默认事件
.once：只触发一次
.capture：使用捕获模式

键盘事件

可以在事件绑定中监听特定按键。

<div id="app"><input @keyup.enter="submit" placeholder="按回车提交"><input @keyup.esc="clear" placeholder="按 ESC 清空">
</div><script>
new Vue({el: '#app',methods: {submit() {alert('提交成功！')},clear(event) {event.target.value = ''}}
})
</script>