一.修饰符 参照 vue.js 事件处理
·(1)事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
1. stop 阻止事件向上冒泡
<!--阻止单击事件向上传播-->
<div @click="doThat">
<div @click.stop="doSomething">子元素</div>
</div>
<!--即加上stop之后,点击子元素的时候,不会触发父元素的 doThat 事件-->
<!--修饰符可以串联-->
<a @click.stop.prevent href="http://www.baidu.com">点击我</a>
<!--现在点击a元素,不会跳转到baidu, prevent 阻止了a 的 默认跳转行为-->
2. capture 捕获事件,改变事件的冒泡顺序
<div class='o-div div1' @click.capture="div1Fn">
div1
<div class='o-div div2' @click.capture="div2Fn">
div2
<div class='o-div div3' @click="div3Fn">
div3
</div>
</div>
</div>
<!-- 这个例子里的事件冒泡变成了 div1Fn -> div2Fn -> div3Fn -->
<div class='o-div div1' @click="div1Fn">
div1
<div class='o-div div2' @click.capture="div2Fn">
div2
<div class='o-div div3' @click="div3Fn">
div3
</div>
</div>
</div>
<!-- 这个例子里的事件冒泡变成了 div2Fn -> div3Fn -> div1Fn -->
<div class='o-div div1' @click.capture="div1Fn">
div1
<div class='o-div div2' @click="div2Fn">
div2
<div class='o-div div3' @click="div3Fn">
div3
</div>
</div>
</div>
<!-- 这个例子里的事件冒泡变成了 div1Fn - > div3Fn -> div2Fn -->
·自己理解: 加了capture的元素下的子元素被点击的时候,父元素先触发,子元素再按照原有的顺序冒泡
·
2.once 事件只会执行一次
<div @click.once="doSomething">点击</div>
·
3.passive 不阻止默认行为,不能与prevent 一起使用,会被忽略,passive 优先级比较高,尤其能够提升移动端的性能。
Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
·
4.prevent 阻止默认行为 ,如表单的提交刷新,a标签的点击跳转
二、按键修饰符 --对具体的按键进行监听
·
例子:
<input @keyup.enter="doSomething" value="请回车"/>
可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符,如下:
<input @keyup.page-down="doSomething" value="翻页-下一页"/>
·
Vue提供了常用的按键的别名:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
可以通过 Vue.config.keyCodes.f1 = 112 来修改对应键值的别名
三、系统修饰符 这个比较少遇到 (2.1.0 新增)
.ctrl
.alt
.shift
.meta
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
请注意修饰键与常规按键不同,在和 keyup 事件一起用时,事件触发时修饰键必须处于按下状态。
四、鼠标按钮修饰符 会显示函数仅响应特定的鼠标按钮(2.2.0 新增)
.left
.right
.middle
<div @click.right.prevent="contextMenu"></div>
<!-- 鼠标按钮修饰符 'right' 结合 事件修饰符 ,可以用来做自定义菜单-->