【Vue2 ✨】Vue2 入门之旅（七）：事件处理
在前几篇文章中，我们学习了指令与过滤器。本篇将介绍 事件处理，重点包括
v-on、事件修饰符以及键盘事件。
目录
- 事件绑定 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>
支持的按键修饰符有：.enter、.esc、.tab、.delete、.space、.up、.down、.left、.right 等。
小结
v-on用于事件监听，缩写为@。- 事件修饰符简化事件处理：
.stop、.prevent、.once等。 - 键盘事件可用
.enter、.esc等修饰符来监听特定按键。
📚下一篇文章，我们将学习 过渡与动画，让 Vue 页面更生动。