当前位置: 首页 > Web前端 > vue.js

Vue前端开发之事件修饰符和按钮修饰符

时间:2023-03-31 15:09:37 vue.js

前言在Vue.js的前端开发中,事件和按钮的使用也是比较常见的操作之一,所以它们相关的事件修饰符和按钮修饰符也是扩展前端训练的常用操作。那么这篇博文将分享一下Vue.js中事件修饰符和键修饰符的使用。1.事件修饰符v-command中的v-on命令在Vue.js的事件处理器中使用,用于事件绑定,也可以用@代替。Vue.js也为v-on命令提供了一些相应的事件修饰符,主要是通过点“.”表示的命令后缀。调用修饰符。v-on指令常用的修饰符如下:.stop—callevent.stopPropagation();防止/停止冒泡。.prevent—调用event.preventDefault();防止/停止默认事件。.capture—添加事件侦听器时使用事件捕获模式。.self—仅当事件是从监听器绑定到的元素本身触发时才会触发回调。.{键码|keyAlias}—只有当监听器绑定到的元素本身触发事件时,才会触发回调。.once——事件只触发一次。注意:使用修饰符时,顺序很重要,对应的代码会按照相同的顺序生成。2.v-model修饰符v-model命令用于实现双向数据绑定。北京前端训练也有自己的修饰符,如下:1??.lazy默认情况下,v-model同步输入框里的值和数据,可以通过这个修饰符在change事件中转化为重新同步的数据。具体操作如下:2??.number自动将输入框的输入值转换为数值类型,具体操作如下:3??.trim自动过滤输入框前后空格,具体操作如下:3.当键修饰符在监听键盘事件时,往往需要监听常用的键值。Vue.js允许在监听键盘事件时为v-on添加一个键修饰符。1.v-on:keyupv-on:keyup:允许在监听键盘事件时为v-on添加键修饰符。如果所有的按键都使用别名,开发者很难记住所有的keyCode,所以Vue.js为最常用的按键提供了别名,如下:.enter(回车键).tab(tab键).delete(获取"delete”和“backspace”键).esc(esc键).space(空格键).up(上键).down(下键).left(左键).right(右键)注:按键修饰符别名可以通过全局config.keyCodes对象进行自定义。4、系统修饰键1、可以使用如下修饰符实现一个只在相应键被按下时触发鼠标或键盘事件的监听器,如下图:.ctrl.alt.shift.meta注意:在Mac系统键盘上,meta对应于命令键(?)。2..exact修饰符允许控制由精确的系统修饰符组合触发的事件。文章来源:三位掌柜程序员