版权声明：本文为博主原创文章，转载请注明出处 https://blog.csdn.net/qq_34160679/article/details/88179725
-
. .stop ：停止冒泡
(1) 如果事件没有任何修饰的话，那么点击按钮的结果是： 1. 点击了btn 2. 进入了div 【冒泡机制，一层一层的往外】 代码： <div class="inner" @click="divHandle"> <input type="button" value="戳他" @click="btnHandle"> </div> (2) 如果对 btn 加入了 .stop 修饰符，那么就会停止往外冒。点击按钮结果 ： 1. 点击了btn 【停止冒泡】 代码： <div class="inner" @click="divHandle"> <input type="button" value="戳他" @click.stop="btnHandle"> </div> -
.prevent 阻止默认行为
<!-- .prevent 阻止默认行为 实例效果： 弹出提示，但是不会跳转到百度界面 --> <a href="http://www.baidu.com" @click.prevent="goBaidu"> Go Baidu </a> -
.capture 使用捕获机制进行触发事件
<!--
.capture 使用捕获机制进行触发事件
实例效果：
1. 进入了div
2. 点击了btn
-->
<div class="inner" @click.capture="divHandle">
.capture 使用捕获机制进行触发事件
<input type="button" value="戳他" @click="btnHandle">
</div>
- .self 只有点击自己时才会触发
<!--
.self 只有点击自己时才会触发
实例效果： 点击btn 不会触发div 的弹出，只有点击div 的才会触发效果
-->
<div class="inner" @click.self="divHandle">
.self 只有点击自己时才会触发
<input type="button" value="戳他" @click="btnHandle">
</div>
- .once 只触发一次
<a href="http://www.baidu.com" @click.prevent.once="goBaidu"> 只支持一次 Go Baidu </a>
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
.inner {
background-color: aqua;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<!--
.stop ：停止冒泡
(1) 如果事件没有任何修饰的话，那么点击按钮的结果是：
1. 点击了btn
2. 进入了div
【冒泡机制，一层一层的往外】
代码：
<div class="inner" @click="divHandle">
<input type="button" value="戳他" @click="btnHandle">
</div>
(2) 如果对 btn 加入了 .stop 修饰符，那么就会停止往外冒。点击按钮结果 ：
1. 点击了btn 【停止冒泡】
代码：
<div class="inner" @click="divHandle">
<input type="button" value="戳他" @click.stop="btnHandle">
</div>
-->
<div class="inner" @click="divHandle">
.stop ：停止冒泡
<input type="button" value="戳他" @click.stop="btnHandle">
</div>
<!--
.prevent 阻止默认行为
实例效果： 弹出提示，但是不会跳转到百度界面
-->
<a href="http://www.baidu.com" @click.prevent="goBaidu"> Go Baidu </a>
<br>
<!--
.capture 使用捕获机制进行触发事件
实例效果：
1. 进入了div
2. 点击了btn
-->
<div class="inner" @click.capture="divHandle">
.capture 使用捕获机制进行触发事件
<input type="button" value="戳他" @click="btnHandle">
</div>
<br>
<!--
.self 只有点击自己时才会触发
实例效果： 点击btn 不会触发div 的弹出，只有点击div 的才会触发效果
-->
<div class="inner" @click.self="divHandle">
.self 只有点击自己时才会触发
<input type="button" value="戳他" @click="btnHandle">
</div>
<!--
.once 只触发一次
-->
<a href="http://www.baidu.com" @click.prevent.once="goBaidu"> 只支持一次 Go Baidu </a>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: { // 这个methods 属性中定义了当前Vue 实例中使用到的方法
divHandle() {
alert("进入了div")
},
btnHandle() {
alert('点击了btn')
},
goBaidu() {
alert("前往Baidu")
}
}
})
</script>
</body>
</html>
v-on:keyup 按键修饰符的使用
-
使用方式：
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input @keyup.enter="submit"> <!-- 按住任何键 都会触发--> <input v-on:keyup.page-down="onPageDown"> -
常用按键码
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right