v-on指令的修饰符
事件修饰符
.stop
调用 event.stop,阻止事件冒泡
<!-- 此时只弹出button -->
<div id="app">
<div @click="alert('div')">
<button @click.stop="alert('button')">点击</button>
</div>
</div>
复制代码
const vm = new Vue({
el: '#app',
methods: {
alert(str) { alert(str); }
}
})
复制代码
.prevent
调用 event.preventDefault(),阻止默认事件
<!-- 点击提交按钮后,页面不会重载 -->
<div id="app">
<form v-on:submit.prevent="onSubmit">
<input type="submit">
</form>
<!-- 也可以只有修饰符 -->
<form v-on:submit.prevent>
<input type="submit">
</form>
</div>
复制代码
const vm = new Vue({
el: '#app',
methods: {
onSubmit() { console.log('submit'); }
}
})
复制代码
.capture
事件捕获模式
<!-- 此时先弹出div再弹出button -->
<div id="app">
<div @click.capture="alert('div')">
<button @click="alert('button')">点击</button>
</div>
</div>
复制代码
const vm = new Vue({
el: '#app',
methods: {
alert(str) { alert(str) }
}
})
复制代码
.self
只当事件是从侦听器绑定的元素本身触发时才触发回调
<!-- 点击button时,只弹出 button -->
<div id="app">
<div id="app">
<div :style="{ backgroundColor: 'red' }"
@click.self="alert('div')">
<button @click="alert('button')">点击</button>
</div>
</div>
</div>
复制代码
const vm = new Vue({
el: '#app',
methods: {
alert(str) { alert(str) }
}
})
复制代码
.once
只触发一次回调
2.1.4新增
点击两次button按钮,只弹出一次button
<div id="app">
<button @click.once="alert('button')">点击</button>
</div>
复制代码
const vm = new Vue({
el: '#app',
methods: {
alert(str) { alert(str) }
}
})
复制代码
.passive
设置 addEventListener 中的 passive 选项
能够提升移动端的性能
2.3.0新增
why passive?
即使在触发触摸事件时,执行了一个空的函数,也会让页面卡顿。因为浏览器不知道监听器到底会不会阻止默认事件,所以浏览器要等到执行完整个函数后,才能决定是否要滚动页面。passive事件监听器,允许开发者告诉浏览器,监听器不会阻止默认行为,从而浏览器可以放心大胆的滚动页面,这样可以大幅度提升移动端页面的性能,因为据统计只有20%的触摸事件会阻止默认事件。
.passive 会告诉浏览器你不想阻止事件的默认行为
注意
使用修饰符时,顺序很重要。相应的代码会以同样的顺序产生。因此, v-on:click.prevent.self 会阻止所有的点击的默认事件 v-on:click.self.prevent 只会阻止对元素自身点击的默认事件
不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。
按键修饰符
在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
复制代码
你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
.enter(回车键)
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space (空格键)
.up (箭头上键)
.down (箭头下键)
.left(箭头左键)
.right(箭头右键)
除了使用Vue提供的按键别名之外,还可以自定义按键别名:
// 全局配置
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
复制代码
Vue.config.keyCodes = {
v: 86,
f1: 112,
// 小驼峰 不可用
mediaPlayPause: 179,
// 取而代之的是 短横线分隔 且用双引号括起来
"media-play-pause": 179,
up: [38, 87]
}
复制代码
<input type="text" @keyup.media-play-pause="method">
复制代码
系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。 修饰键与常规按键不同,在和 keyup 事件一起用时,事件触发时修饰键必须处于按下状态,换句话说,只有在按住 ctrl 的情况下释放其它按键,才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为,请为 ctrl 换用 keyCode:keyup.17。
.ctrl
.alt
.shift
.meta
在 Mac 系统键盘上,meta 对应 command 键 (⌘)。
在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。
在 Sun 操作系统键盘上,meta 对应实心宝石键 (◆)。
在其他特定键盘上,尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品,比如 Knight 键盘、space-cadet 键盘,meta 被标记为“META”。
在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
复制代码
exact 修饰符
允许你控制由精确的系统修饰符组合触发的事件。
2.5.0 +
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
复制代码
鼠标按钮修饰符
仅当点击特定的鼠标按钮时会处理执行函数
2.2.0 +
.left
.right
.middle
最后
如果你觉得此文对你有一丁点帮助,点个赞。或者可以加入我的开发交流群:1025263163相互学习,我们会有专业的技术答疑解惑
如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点star: http://github.crmeb.net/u/defu 不胜感激 !