Vue3 _ 10. Vue 事件处理

这个事件处理其实就是使用 v-on (通常缩写为 @ 符号) 来监听 DOM 的一些操作进行一些的改变。好比点击某个按钮的时候，弹出一句话，这个就是一个非常简单的事件处理。

一、基本事件监听

我们这里弄一个简单的例子，其实就是复制官网上的~~~

通过点击 button，我们可以让 counter +1。

二、事件处理方法

我们上面的例子其实也有不好的时候，我们常常碰到的业务都是会进行一大段的逻辑处理，所以我们需要将点击事件封装成一个方法，让 v-on 进行绑定方法名，来看一下。

这里要说明一点，这个 event 是一个原生 DOM 事件，通过日志我们可以看到，里面有两个属性，screenX、screenY，这个是我们点击屏幕时候的 x 轴和 y 轴的位置。

三、多事件处理

Vue 中还可以支持多事件处理，我们来上一个简单的例子。

这里多事件，我们不能省略 （）！！！ 千万不能省略。

四、事件修饰符

从官网直接复制的，看不懂没关系，这个我们来用一个案例解释一下，来看一下。

可以看到，这个其实很简单的两个点击事件，点击 div 框子，也就是红色区域，我们弹出 DIV，点击 123，我们弹出 A，下面我们来点击一下。

这里没有办法上传视频，我就直接口述了。

我们点击红色框（没有123）的地方的时候，只弹出来一个 DIV，但是当我们点击 123 的时候，先弹出 A，然后再弹出 DIV，这个就是事件传播。

为了避免这个事件的传播，我们可以使用这个事件修饰符 stop。来看一下。

我们在 a 标签的 click 上加上 .stop，这样就可以避免我们事件继续传播到 div 中了。

还有就是 once 这个事件修饰符，这个是让事件只执行一次，等你第二次再触发事件的时候，这个就不会再去执行了。

其他的大家可以看一下官网的例子，自己去写一些 demo 练习一下。

还有一点，这些修饰符可以联合使用，来看官网例子。

这个的意思就是，不向下传递，并且拦截默认事件（自己去百度啥叫默认事件）。

五、按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 或者 @ 在监听键盘事件时添加按键修饰符。

就用登录来说，我们输入完成账号密码之后，需要点击一下登录的按钮才会触发请求后端的事件，但是有的人习惯按一下回车，这里我们也可以让我们的浏览器页面也监听浏览器回车，然后进行触发事件。来看例子。

我们在选中 button 之后，按回车，就可以看到控制台中输出了“点击请求登录”的字样。

除去可以监听回车，其实还有很多，详细看官网~~~

这一篇东西不多，大家仔细理解一下~~

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~~