Keep Learning Vuejs 2.0 - 基本事件处理

Posted 2021-05-01 前端高级开发者

在VUE中， 对事件也有自己的独特封装。使用方式会比较简洁。我们来看最简单的方式。 其实我们之前已经使用到了点击事件。 比如

这种模式的回传递一个事件对象过来。我们还可以改为这种模式

这样我们就可以在事件函数中传递值。但是这样的话，要获取原始事件对象，就通过$event作为参数传递到函数。

下面我们来学习一下事件修饰符。在我们原始事件中，我们会阻止一些默认事件。比如event.preventDefault() 或 event.stopPropagation()。当然在VUEJS中也可以这样使用。 不过VUEJS给了更加方便的使用方式。比如v-on:click.stop或者v-on:keyup.enter等等。修饰符也可以串联，如： v-on:click.stop.prevent或者v-on:click.prevent.stop。 这里注意一下串联的顺序不一样，其执行的结果也有所不同。 

下面是一些修饰符

 .stop .prevent .capture .self .once

包含键修饰符 v-on:keyup.13 这种后面跟键的数值， 这种方式记住键盘，会比较麻烦。VUE也提供了别名比如，v-on:keyup.enter,这种写法还可以简写成@keyup.enter 

下面是别名

 .enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right

组合按键 .ctrl .alt .shift .meta 比如： @keyup.alt.21, @click.ctrl. 但是要注意一点事，键盘事件@key.alt这种形式，单纯按下alt是不会触发事件，需要配合其他按键

待续.......

我们稍微推广一下自己:

我们正在做 "高手计划", 着重培养喜欢学习前端技术的人员, 成为WEB前端开发工程师. 我们的目标的是培养高级前端开发者. 对以后的工作没有压力, 提高自己在社会的竞争力, 解决问题的能力.

需要提升自己的欢迎入

官网: https://www.gaoshoujihua.com

欢迎大家传播与分享