原始代码(修饰符将在此代码基础上测试)
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<div id="demo">
<a href="https://www.github.com">www.github.com</a>
<div id="div01" @click="showId()" style="width:200px; height:200px; background-color:brown">
<div id="div02" @click="showId()" style="width:150px; height:150px; background-color:yellow">
<div id="div03" @click="showId()" style="width:100px; height:100px; background-color:green">
<div id="div04" @click="showId()" style="width:50px; height:50px; background-color:plum"></div>
</div>
</div>
</div>
</div>
<script>
var demo = new Vue({
el: '#demo',
methods: {
showId: function () {
alert(event.currentTarget.id);
},
showMessage: function () {
alert('禁止访问');
}
},
})
</script>
以上代码还未使用任何修饰符。
效果如下(标准冒泡):
- 点击链接 : 跳转 github 首页
- 点击 div01 : 弹出 div01
- 点击 div02 : 弹出 div02 – div01
- 点击 div03 : 弹出 div03 – div02 – div01
- 点击 div04 : 弹出 div04 – div03 – div02 – div01
Vue.JS 中的修饰符
事件修饰符
-
.prevent
阻止默认提交后的重新加载
- 修改 a 标签如下:
<a href="https://www.github.com" @click.prevent>www.github.com</a> 或者 <a href="https://www.github.com" @click.prevent="showMessage()">www.github.com</a>
- 点击效果:超链接无法跳转。第二种写法弹出"禁止访问"提示。
-
.once
事件只触发一次
- 修改 div01 标签如下:
<div id="div01" @click.once="showId()" style="width:200px; height:200px; background-color:brown">
- 点击 div01 : 第一次点击弹出 div01, 然后再点击无效果。
-
.self
监听触发的事件是否直接作用于当前元素。如果不是则跳过
- 修改 div02 标签如下:
<div id="div02" @click.self="showId()" style="width:150px; height:150px; background-color:yellow">
- 点击 div01 : 弹出 div01
- 点击 div02 : 弹出 div02 – div01
- 点击 div03 : 弹出 div03 – div01
- 点击 div04 : 弹出 div04 – div03 – div01
-
.capture
事件冒泡时,优先触发带有该修饰符的元素(多个时,由内向外),然后触发本身,最后冒泡规则触发其它事件。
- 修改 div02 div03 标签如下:
<div id="div02" @click.capture="showId()" style="width:150px; height:150px; background-color:yellow"> <div id="div03" @click.capture="showId()" style="width:100px; height:100px; background-color:green">
- 点击 div01 : 弹出 div01
- 点击 div02 : 弹出 div02 – div01
- 点击 div03 : 弹出 div02 – div03 – div01
- 点击 div04 : 弹出 div02 – div03 – div04 – div01
-
.stop
阻止事件的冒泡。
- 修改 div02 标签如下:
<div id="div02" @click.stop="showId()" style="width:150px; height:150px; background-color:yellow">
- 点击 div01 : 弹出 div01
- 点击 div02 : 弹出 div02
- 点击 div03 : 弹出 div03 – div02
- 点击 div04 : 弹出 div04 – div03 – div02
按键修饰符
- 标准 keycode 指定
具体规则参照【keycode对照表】
常用的如 enter – 13; backspace – 8 等 - 自定义 keycode 指定
使用以下代码进行全局定义,定义后即可调用,调用方法同上
Vue.config.keyCodes.enter = 100
- 快捷名称指定
Vue 提供了一些快捷的名称,可以直接使用 名称 调用
- .enter
- .tab
- .delete
- .space
- .ctrl
- .alt
- .shift
- .meta
- .up
- .down
- .left
- .right
- 按键修饰符使用
与事件修饰符相同,按键修饰符也支持串联使用(以下示例中的事件并未定义)
<!-- Ctrl + S -->
<input type="text" @keyup.ctrl.83="saveMessage()">
<!-- 按住 ctrl 点击鼠标 -->
<div @click.ctrl="multiCheck()"></div>