5.Vue修饰符（Modifier）

目录

---

Vue专栏目录（点击进入…）

---

---

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	系统 按键 Mac系统键盘 command键（⌘） Windows系统键盘 徽标键 （⊞） Sun操作系统键盘 实心宝石键（◆） 其他特定键盘 尤其在MIT和Lisp机器的键盘、以及其后继产品，比如Knight键盘、space-cadet键盘，meta 被标记为“META”。在Symbolics键盘上，meta被标记为“META”或者“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被销毁时，所有的事件处理器都会自动被删除。无须担心如何清理它们