08《Vue 入门教程》Vue 事件处理为什么大公司很少用vue。
本节我们介绍Vue如何处理事件？我们在章节2.2中介绍了指令v-on，本章将详细介绍v-on一些用法。包括如何传递参数，如何使用事件修饰符等。其中，事件修改符是本章的难点。有许多事件修多，学生不需要一下子记住，只要学会了如何使用，如果在开发过程中被遗忘，可以通过阅读文档来使用。vue框架菜鸟教程ajax。
使用v-on指令监听DOM事件在触发时运行JavaScript代码。
实例演示
“运行案例”可查看在线运行效果Vue.js。
代码解释:在html第三行，我们用v-on指令给button绑定一个元素click并在点击时执行事件count 1的操作。
在上面的例子中，我们直接在模板中写下事件处理函数，但许多事件处理的逻辑非常复杂，所以直接JS代码写在v-on有时指令不可行，v-on指令可以通过接收定义的方法来调用。
实例演示
“运行案例”可查看在线运行效果
代码解释:在html第三行，我们用v-on指令给button绑定一个元素click并在点击时执行事件add方法。在JS我们定义了代码9-11行的方法add；触发此方法时给予count 1。
有时我们需要在事件触发时传递一些参数，
实例演示
“运行案例”可查看在线运行效果
代码解释:在html第三行，我们用v-on指令给button一个元素被绑定click并在点击时执行事件add方法。在JS我们定义了代码9-11行的方法add；触发此方法时给予count 1。vue3**官网。
有时我们需要访问原始的内联语句处理器DOM事件$event传入方法：vue3官网中文文档。
实例演示
“运行案例”可查看在线运行效果vue3实战教程pdf。
代码解释:在上面JS代码9-12行，我们定义了事件函数setCount。按钮点击事件时，我们将$event因此，在函数中setCount原始事件对象可以访问。
调用事件处理程序event.preventDefault()或event.stopPropagation()是很常见的需求。虽然我们可以在方法中轻松实现这一点，但更好的方法是，方法只是纯数据逻辑，而不是处理DOM事件细节。要解决这个问题，Vue.js为v-on提供事件修改符。实现方法是在事件名称后面以后缀的形式添加指定的修饰符。
Vue提供以下事件修饰符：
接下来，让我们用一个完整的例子来看看这些修饰符的使用方法。
实例演示
“运行案例”可查看在线运行效果vue编程式导航。
代码解释：代码4-7行，stop在这种情况下，当我们给按钮时click事件添加.stop点击按钮修改符后，事件不会向上传递。代码第10-16行，submit.prevent在案例中，当给submit事件添加.prevent修改符后，提交事件不再重载页面。代码第19-21行，capture在这种情况下，我们添加了父容器capture点击按钮时，会先触发事件capture点击事件中的事件函数，然后触发按钮绑定。代码第24-26行，self在这种情况下，我们添加了父容器点击事件.self所以只有点击父容器才会触发修饰符，点击按钮时不会触发父容器绑定事件。代码第29-31行，once在这种情况下，我们添加了按钮点击事件.once修改符，所以只有**次点击按钮才会触发事件函数，再次点击后不会触发事件函数。
在监控键盘事件时，我们经常需要检查详细的按钮。Vue允许为v-on按键修饰符添加到监控键盘事件中：
必要时支持旧浏览器，Vue提供绝大多数常用按键码的别名：
鼠标或键盘事件的监听器只有在按下相应的按钮时才能触发。
注意：在Mac在系统键盘上，meta对应command键()。在Windows系统键盘meta对应Windows徽标键()。在Sun操作系统键盘，meta对应实心宝石键()。特别是在其他特定键盘上，MIT和Lisp机器键盘及其后继产品，如Knight键盘、space-cadet键盘，meta被标记为“META”。在Symbolics键盘上，meta被标记为“META”或者“Meta”。Vue提供了.exact修改符，实现单独的系统按钮事件。本节，我们带您学习事件处理。主要知识点如下：
