事件修饰符
.prevent
阻止标签的默认事件
- 例:contextmenu事件在元素中用户右击鼠标时触发并打开上下文菜单,意思就是右键单击的时候会打开菜单并且执行自定义事件
<button @contextmenu="menu">按钮</button>
- 而用了.prevent修饰符再右键点击就只会执行自定义的事件,不会执行默认打开菜单的事件
<button @contextmenu.prevent="menu">按钮</button>
.stop
阻止事件冒泡,写在触发事件冒泡的元素上
- 例:点击p标签时会执行自身的点击事件,由于事件的冒泡,也会执行父元素身上的点击事件
<div class="box" @click="boxClick">
<p class="small" @click.stop="smallClick"></p>
</div>
- 加了.stop修饰符之后,会阻止事件冒泡,将不会执行父元素身上的方法
<div class="box" @click="boxClick">
<p class="small" @click.stop="smallClick"></p>
</div>
.capture
捕获事件冒泡,它会影响事件冒泡的执行顺序,变成了由外向内执行
- 例:此时点击p标签的话,由于事件冒泡的机制,会先执行p标签上的事件,再执行父元素div标签的事件。
<div class="box" @click="boxClick">
<p class="small" @click="smallClick"></p>
</div>
- 加了
.capture
修饰符后会先执行父元素div标签上的事件,再执行子元素p标签上的事件
<div class="box" @click.capture="boxClick">
<p class="small" @click.capture="smallClick"></p>
</div>
.self
控制事件只在自己本身的元素上起作用
- 例:此时点击p标签的话,由于事件冒泡的机制,会先执行p标签上的事件,再执行父元素div标签的事件。
<div class="box" @click="boxClick">
<p class="small" @click="smallClick"></p>
</div>
- 加了
.self
修饰符后,只会执行自身身上的事件
<div class="box" @click.self="boxClick">
<p class="small" @click="smallClick"></p>
</div>
.once
控制事件只起作用一次,事件执行一次之后就再不执行了,除非是重新加载
<button @click.once=“menu”>按钮
按键修饰符
在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
用法
<input v-on:keyup.enter="submit">
按键码
- keyup、keydown //抬起/按下
- .left 键盘左键
- .right 键盘右键
- .up 键盘上键
- .down 键盘下键
- .enter 键盘回车键
- .esc 键盘esc键
- .delete 键盘退格键
- .space 键盘空格键
输入框获取焦点后,对应的修饰符才会起作用
表单元素修饰符
.lazy
不再进行实时数据双向绑定,直到遇到change事件才会进行数据的双向绑定
.number
强制的把用户输入的内容转换为number类型
如果输入的内容是数字开头,后面包含了字母,则会把数字保留下来,字母过滤掉
但是如果输入的内容是字符串开头,那么number修饰符不会做任何事情
.trim
过滤用户输入内容的左右两边的空格,中间内容的空格不过滤