前端开发离不开用户交互，点击按钮、提交表单、滚动页面...这些操作都需要通过事件来响应。在传统的 DOM 操作中，我们习惯用
addEventListener来绑定事件，代码分散且难以维护。Vue 提供了一套优雅的事件处理机制，让事件监听和响应逻辑变得清晰可控。通过
v-on指令（简写@），我们可以直接在模板中声明事件绑定，将交互逻辑与视图层紧密结合。
想象一个场景：用户点击"添加购物车"按钮，系统需要：
如果用原生 JS 来写，代码可能散落在各处，维护起来相当头疼。Vue 的事件系统让这些逻辑集中在组件的 methods 中，配合响应式数据，整个流程清晰明了。
v-on 的基本用法，内联语句与方法处理器的区别.prevent、.stop、.capture 等修饰符的妙用代码组织更清晰
传统方式需要在 JS 中查找元素、绑定事件，Vue 直接在模板中声明，一目了然。
自动绑定 this
Vue 自动为 methods 中的方法绑定组件实例，再也不用担心 this 指向问题。
修饰符语法糖
常用操作如阻止默认行为、阻止冒泡，一行代码搞定，告别 e.preventDefault() 的繁琐。
<div id="app">
<button v-on:click="count += 1">点击了 {{ count }} 次</button>
<button @click="sayHello">打招呼</button>
</div>
<script>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
sayHello: function() {
alert('你好！')
}
}
})
</script>
第一个按钮使用内联语句直接操作数据，第二个按钮调用 methods 中的方法。两种方式各有适用场景，后面会详细讲解。
事件处理是 Vue 开发中最常用的功能之一，建议：
接下来，让我们从事件监听开始，逐步深入 Vue 的事件处理世界。