Vue核心③(事件处理)

Vue核心③(事件处理)

文章目录

​​事件处理​​

​​事件的基本使用​​​​事件修饰符​​​​键盘事件​​

事件处理

事件的基本使用

我们已经知道在原生js中如何去绑定一个事件，那么在Vue中我们怎么实现事件绑定呢？

这里我们有几个注意的点：

这个show方法会接受一个事件对象show方法中的this是一个Vue实例。但是如果你使用的是箭头函数，他没有自己的this，就会向外部寻找，最后this就是window。

所有被Vue管理的函数(也就是Vue对象里面的函数)最好都使用普通函数

​​v-on:click​​​也有它的简写形式：​​@click​​,所以上面的代码也可以写成：

​​点我有神奇的事情发生​​

这个回调函数也可以接受参数：

在函数名之后加一个括号，传入参数即可。不过也会有一个问题：前面我们提到过Vue在调用回调函数的时候会传入一个事件对象，如果我们现在要使用它怎么办呢？

如果直接多创建一个形参是接收不到这个事件对象的。

我们这里需要用到一个占位符​​$event​​

例如：

注意：

最后总结一下： 事件的基本使用：

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；事件的回调需要配置在methods对象中，最终会在vm上；methods中配置的函数，不要用箭头函数！否则this就不是vm了；methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

事件修饰符

①在回调方法中，利用事件对象阻止默认行为：

②使用事件修饰符

像这样的事件修饰符还有：

​​prevent​​：阻止默认事件（常用）；​​stop​​：阻止事件冒泡（常用）；​​once​​：事件只触发一次（常用）；​​capture​​：使用事件的捕获模式；​​self​​：只有event.target是当前操作的元素时才触发事件；​​passive​​：事件的默认行为立即执行，无需等待事件回调执行完毕；

stop、once、passive在这里不做讲解。

​​capture：使用事件的捕获形式​​​ 我们知道在JS的事件流中分为​​捕获阶段​​和​​冒泡阶段​​，现在我们来看下面的两个嵌套的盒子：

注意：给谁加，谁的事件就在捕获阶段被处理。上面的那个例子中，我们应该给外面的盒子div1加capture修饰符.

​​self：只有event.target是当前操作的元素时才触发事件​​ 我们还是提供一个场景：

倘若我们现在给div加一个self修饰符，那么当冒泡到div的时候发现event.target不符合当前div元素，就不会触发事件，从另一个角度说我们可以利用这一点去阻止冒泡。

注意：事件修饰符可以叠加 例如： @click.prevent.stop="showInfo"表示先阻止默认事件，再停止冒泡。 @click.prevent.stop="showInfo"表示先停止冒泡，再阻止默认行为。 不过最好不要与once叠加，容易出错

键盘事件

现在我们想在按下键盘上的enter键时触发事件。在原生js中我们可能需要去知道enter键的keycode，再利用条件判断来完成。但是现在Vue为我们提供了常用的按键别名是我们可以快速达成目标。

Vue中常用的按键别名：

回车 => enter删除 => delete (捕获“删除”和“退格”键，也就是Backspace和Delete两个按键)退出 => esc空格 => space换行 => tab (特殊，必须配合keydown去使用)上 => up下 => down左 => left右 => right

那么我们如何去使用呢？

keydown和keyup是两个常用的键盘事件： keyup是在按键按下回弹时触发 keydown是直接按下触发

如此在我们按下enter键的时候，事件就会被触发并执行相应的回调函数。

如果我们想在其他的按键上面绑定事件怎么办呢？​​​我们可以使用按键原始的key值去绑定，但注意要转化为kebeb-case(短横线命名)​​

举个例子：我们想给切换大小写的键绑定一个事件。那么我们就想知道切换大小写键的key值是多少，我们可以利用键盘事件对象的key属性去查询。

前面那一个就是key值，得到之后我们不能直接使用，还要转化为短横线命名法：caps-lock，再去使用就可以了。

在这里有四个键较为特殊：​​系统修饰键(ctrl、alt、shift、meta)​​

meta键就是win键

配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。配合keydown使用：正常触发事件。

拓展：如果我们想要按下ctrl+y时候才触发事件怎么办？ 如果像下面这样：

那么我们使用ctrl+任意键都可以触发这个事件，显然不符合要求。我们可以这样写：

一般只有系统修饰键才会这么写

同时Vue还支持别名的定制：

Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

然后我们就可以使用了

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。