Vue修饰符(Modifier)
Vue修饰符(Modifier)
修饰符(modifier)是以半角句号“.
”指明的特殊后缀,用于指出一个指令应该以特殊方式绑定
<form v-on:submit.prevent="onSubmit">...</form>
.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()
表单修饰符
表单修饰符 | 描述 |
---|---|
.lazy | 数据输入完成后再进行数据的传输 |
.number | 将用户的输入值转为数值类型 |
.trim | 过滤用户输入的首尾空白字符 |
(1).lazy
在默认情况下,v-model 在每次input事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转为在 change 事件之后进行同步:
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
(2).number
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:
<input v-model.number="age" type="number">
这通常很有用,因为即使在type="number"时,HTML 输入元素的值也总会返回字符串。如果这个值无法被parseFloat()解析,则会返回原始的值。
(3).trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:
<input v-model.trim="msg">
事件修饰符
在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理DOM事件细节
为了解决这个问题,Vue.js为v-on提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的
事件修饰符 | 描述 |
---|---|
.stop | 阻止事件继续传播(阻止事件向上级DOM元素继续传递) |
.prevent |
阻止默认事件的发生,事件不再重载页面 默认事件指对DOM的操作会引起自动执行的动作,比如点击超链接的时候会进行页面的跳转,点击表单提交按钮时会重新加载页面等,使用".prevent"修饰符可以阻止这些事件的发生 <a href=“www.baidu.com” @click.prevent>百度</a> |
.capture |
捕获冒泡,即有冒泡发生时,有该修饰符的DOM元素会先执行,如果有多个,从外到内依次执行,然后再按自然顺序执行触发的事件 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 |
.self | 将事件绑定到自身,只有自身才能触发,通常用于避免冒泡事件的影响 |
.once | 设置事件只能触发一次。比如按钮的点击等 |
.passive | 告诉浏览器不阻止事件的默认行 |
.native | 在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加“.native”事件是无法触发的 |
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。
因此,用v-on:click.prevent.self会阻止所有的点击,而v-on:click.self.prevent只会阻止对元素自身的点击
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 -->
<form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div><!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a><!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
once事件修饰符(2.1.4新增)
不像其它只能对原生的DOM事件起作用的修饰符,.once修饰符还能被用到自定义的组件事件上
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
passive事件修饰符(2.3.0新增)
Vue还对应addEventListener中的passive选项提供了.passive修饰符。
.passive修饰符尤其能够提升移动端的性能。
注意:不要把.passive和.prevent一起使用,因为.prevent将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive会告诉浏览器你不想阻止事件的默认行为
<!-- 滚动事件的默认行为(即滚动行为)将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
键盘(按键)事件
在监听键盘事件时,经常需要检查详细的按键。Vue允许为v-on在监听键盘事件时添加按键修饰符
键盘事件 | 描述 |
---|---|
@keydown | 键盘按下时触发 |
@keypress | 键盘按住时触发 |
@keyup | 键盘弹起 |
获取按键的键码 event.keyCode
按键码
keyCode的事件用法已经被废弃了并可能不会被最新的浏览器支持。
使用keyCode attribute也是允许的
<input v-on:keyup.13="submit">
为了在必要的情况下支持旧浏览器,Vue提供了绝大多数常用的按键码的别名:
按键码别名 | 描述 |
---|---|
.esc | Esc键 |
.tab | Tab键 |
.ctrl | Ctrl键 |
.alt | Alt键 |
.enter | Enter键 |
.delete | delete(删除)/BackSpace(退格) |
.space | Space(空格键) |
.up | Up(上箭头) |
.down | Down(下箭头) |
.left | Left(左箭头) |
.right | Right(右箭头) |
键盘事件使用
@keyup.13 ⇒ 按回车键
@keyup.enter ⇒ 回车
@keyup.up ⇒ 上键
@keyup.down ⇒ 下键
@keyup.left ⇒ 左键
@keyup.right ⇒ 右键
@keyup.delete ⇒ 删除键
有一些按键(.esc 以及所有的方向键)在IE9中有不同的key值, 如果想支持IE9,这些内置的别名应该是首选。
还可以通过全局config.keyCodes对象自定义按键修饰符别名:
//可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
按键码详细
键盘按钮 | 键码 | 键盘按钮 | 键码 |
---|---|---|---|
Backspace(退格键) | 8 | Tab(制表键) | 9 |
Enter(回车键) | 13 | Shift(上档键) | 16 |
Ctrl(控档键) | 17 | Alt(换挡键) | 18 |
Pause/Break(暂停/中断) | 19 | Caps Lack(大小写锁定) | 20 |
Shift+Tab(上档+制表) | 25 | Esc(退出键) | 27 |
Page Up(向上翻页) | 33 | Page Down(向下翻页) | 34 |
End(结尾) | 35 | Home(开头) | 36 |
Left Arrow(向左箭头) | 37 | Up Arrow(向上箭头) | 38 |
Right Arrow(向右箭头) | 39 | Down Arrow(向下箭头) | 40 |
Ins(插入键) | 45 | Del(删除键) | 46 |
左windows键 | 91 | 右windows键 | 92 |
上下文菜单键 | 93 | 数字小键盘0 | 96 |
数字小键盘1 | 97 | 数字小键盘2 | 98 |
数字小键盘3 | 99 | 数字小键盘4 | 100 |
数字小键盘5 | 101 | 数字小键盘6 | 102 |
数字小键盘7 | 103 | 数字小键盘8 | 104 |
数字小键盘9 | 105 | 数字小键盘* | 106 |
数字小键盘+ | 107 | 数字小键盘- | 109 |
数字小键盘. | 110 | 数字小键盘/ | 111 |
F1 | 112 | F2 | 113 |
F3 | 114 | F4 | 115 |
F6 | 116 | F7 | 118 |
F8 | 119 | F10 | 120 |
F11 | 121 | F12 | 122 |
Num Lock(数字锁) | 144 | Scrool Lock(滚动锁) | 145 |
分号 |
186(IE/Chrome/Safari) 59(Opera/Firefox) |
<(小于号) | 188 |
>(大于号) | 190 | /(正斜杠) | 191 |
`(沉音符) | 192 | =(等于号) | 61 |
[(左方括号) | 219 | \(反斜杠) | 220 |
](右方括号) | 221 | 单引号 | 222 |
键盘按钮 | 键码 | 键盘按钮 | 键码 |
---|---|---|---|
a A | 65 | n N | 78 |
b B | 66 | o O | 79 |
c C | 67 | p P | 80 |
d D | 68 | q Q | 81 |
e E | 69 | r R | 82 |
f F | 70 | s S | 83 |
g G | 71 | t T | 84 |
h H | 72 | u U | 85 |
i I | 73 | v V | 86 |
j J | 74 | w W | 87 |
k K | 75 | x X | 88 |
l L | 76 | y Y | 89 |
m M | 77 | z Z | 90 |
系统修饰键(2.1.0新增)
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器
系统修饰键 | 描述 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
.ctrl | Ctrl键 | ||||||||||
.alt | Alt键 | ||||||||||
.shift | Shift键 | ||||||||||
.meta |
|
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>
请注意:修饰键与常规按键不同,在和keyup事件一起用时,事件触发时修饰键必须处于按下状态。换句话说,只有在按住ctrl的情况下释放其它按键,才能触发keyup.ctrl。而单单释放ctrl也不会触发事件。如果你想要这样的行为,请为ctrl换用keyCode:keyup.17
.exact修饰符(2.5.0新增)
.exact修饰符:允许控制由精确的系统修饰符组合触发的事件
<!-- 即使Alt或Shift被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>
<!-- 有且只有Ctrl被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>
鼠标按钮修饰符(2.2.0新增)
鼠标按钮修饰符 | 描述 |
---|---|
.left | 点击鼠标左键即可触发事件 |
.right | 点击鼠标右键即可触发事件 |
.middle | 按下滑轮触发事件 |
这些修饰符会限制处理函数仅响应特定的鼠标按钮
为什么在HTML中监听事件?
可能注意到这种事件监听的方式违背了关注点分离(separation of concern)这个长期以来的优良传统。但不必担心,因为所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上,它不会导致任何维护上的困难。实际上,使用v-on有几个好处:
(1)扫一眼HTML模板便能轻松定位在JavaScript代码里对应的方法
(2)无须在JavaScript里手动绑定事件,ViewModel代码可以是非常纯粹的逻辑,和DOM完全解耦,更易于测试
(3)当一个ViewModel被销毁时,所有的事件处理器都会自动被删除。无须担心如何清理它们
上一篇:Vue指令(Directives) 下一篇:Vue实例
Vue修饰符(Modifier)相关推荐
- 揭穿Vue修饰符async的秘密
官方推荐使用一种update:my-prop-name 的模式来替代事件触发,目的是为了优雅而不粗鲁的实现父子组件间的双向绑定!先来完成一个小功能:通过父组件按钮将子组件显示出来,如图: 父组件代码: ...
- 【建议收藏】面试官贼喜欢问的 32+ vue 修饰符,你掌握几种啦?
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行了三个多月,大家一起交流学习,共同进步. 前言 vue简洁好用体现在很多个地方,比如其内置了32+修饰 ...
- vue修饰符--可能是东半球最详细的文档(滑稽)
原文链接:segmentfault.com 为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~ 目录 表单修饰符 事件修饰符 鼠标按键修饰符 ...
- 前端-vue(修饰符-组件)
内置对象Vue new Vue():它是Vue里的内置对象,传递参数是对象类型传递 <script src="js/vue.js"></script>< ...
- vue修饰符 .lazy .number .trim
.lazy 在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点 或者 按下回车键时才更新 <template>< ...
- vue修饰符和条件指令
修饰符 创建 04-修饰符.html 修饰符 (Modifiers) 是以半角句号(.)指明的特殊后缀,用于指出一个指令应该以特殊方式绑定. 例如,.prevent 修饰符告诉 v-on 指令对于触发 ...
- vue --- 修饰符.lazy、.number、.trim
.lazy: 会在转变为change事件中同步 <div id="app"><input type="text" v-model.lazy=& ...
- Java反射之如何判断类或变量、方法的修饰符(Modifier解析)
a->public b->public static c->public static final d->private 就是返回这些 https://blog.csdn.ne ...
- JetPack Compose之Modifier修饰符
前言 在Compose中,每一个组件都是带有@Compose注解的函数,被称为Composable.Compose已经预置了很多的Compose UI组件,这些组件都是基于Material Desig ...
- Vue 32个修饰符,你不一定全知道!
点击上方 前端开发博客,关注公众号 回复加群,加入前端群 前言 vue简洁好用体现在很多个地方,比如其内置了32+修饰符,可以很方便我们阻止冒泡.阻止默认事件.鼠标事件处理.系统键盘事件等等,让我们可 ...
最新文章
- php批量修改图片地址,织梦网站内容页图片绝对路径设置及批量替换方法
- android开发常见的设计模式,Android开发有哪些常用设计模式?
- Django模板语言
- 《Science》日本科学家利用干细胞诱导成功了大鼠生殖细胞
- 表观遗传小白逆袭之道:从这 19 个视频开始吧!
- php 获取手机设备的ID,开源 | 通过提取神经元知识实现人脸模型压缩:MobileID可在移动设备上快速运行...
- OGRE源代码resource分析
- openwrt php 吃内存,ipkg, opkg 与 openWrt
- JDK5.0的11个主要新特征
- [org/springframework/jdbc/support/sql-error-codes.xml]
- 拨打freeswitch会议室:mod_local_stream.c:880 Unknown source default
- 非越狱iPad实现外接键盘全APP五笔输入(IOS14已自带五笔)
- 微信公众号开发文档参考
- Visual C++网络编程经典案例详解 第5章 网页浏览器 CHtmlView类 实现查看源文件功能步骤
- 实现导航栏的几种方式
- thinkpad开机后无法进入系统怎么办?
- 适合学生写的请假管理系统
- 彬彬偷偷告诉了平行世界的其他杰哥们这个世界里的杰哥已经得到了阿伟,于是他们也来到了这个世界想要教阿伟登Dua郎,现在他们“成群杰队”地赶来了!
- 数组去重---泥腿子前端
- 快速排序原理及Java实现
热门文章
- perl学习笔记-----------------------(8)
- 菜单栏、工具栏、状态栏——QT
- 【由浅入深_打牢基础】WEB缓存投毒(上)
- 机器学习:self-paced 和 fine-tuning
- 小程序跳转:h5避免中间页直接打开微信小程序
- 服务器winsxs文件夹怎么清理工具,Winsxs文件夹内容怎么清理 Winsxs文件夹瘦身清理教程图解...
- C++ Const 初步总结(《C++程序设计语言》读后感)
- 论文笔记:2004-Model Predictive Control of a Mobile Robot Using Linearization
- 20220326-代码日记-Unity画符
- 【转】业界主流单片机剖析