版权声明：本文为博主原创学习笔记，如需转载请注明来源。 https://blog.csdn.net/SHU15121856/article/details/85206475
事件修饰符
在Vue的官方文档中给出了引入v-on:的事件修饰符的理念是，不希望在方法中去处理DOM细节。
事件冒泡
事件在事件源上发生，处理事件的方法并未绑定在该事件源上，事件就要向外或者向内传播（propagation），也称事件冒泡。在JS里，可以用事件对象的stopPropagation()方法来阻止事件的进一步传播。
index.html
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:>
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--这个vue-app是根容器-->
<div id="vue-app">
<h3>事件只允许被触发一次</h3>
<button @click.once="add()">涨一岁</button>
<p>年龄是{{age}}</p>
<h3>让a标签点了不跳转</h3>
<a v-on:click.prevent="alert()" href="http://www.baidu.com">百度</a>
<h3>用stopPropagation阻止事件冒泡</h3>
<div class="canvas" v-on:mousemove="updateXY">
{{x}},{{y}}
<span v-on:mousemove="stopMoving">鼠标放在这里xy将停止变化</span>
</div>
<h3>用Vue的事件修饰符.stop来阻止事件冒泡</h3>
<div class="canvas" v-on:mousemove="updateXY">
{{x}},{{y}}
<span v-on:mousemove.stop="">鼠标放在这里xy将停止变化</span>
</div>
</div>
<script src="app2.js"></script>
</body>
</html>
app2.js
// 实例化vue对象
new Vue({
el: "#vue-app",
data: {
age: 30,
x: 0,
y: 0
},
methods: {
add: function (inc = 1) {
this.age += inc;
},
updateXY: function (event) {//这里event即是当事件触发时的事件对象
// console.log(event); //输出查看一下
this.x = event.offsetX;
this.y = event.offsetY;
},
stopMoving: function (event) {
// 该方法将停止事件的传播,阻止事件被分派到其他Document节点
event.stopPropagation();
},
alert: function () {
alert("只弹出这个alert,不跳转到指定的url");
}
}
});
style.css
.canvas{
width: 400px;
padding: 100px 20px;
text-align: center;
border: 1px solid #333;
}
运行结果
键盘事件,键值修饰符
官方文档中现在叫按键修饰符了。
index.html
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--这个vue-app是根容器-->
<div id="vue-app">
<h3>键盘事件</h3>
键盘事件,按下键盘按键时触发:
<input type="text" v-on:keyup="logMsg(1)">
<br>
键值修饰符,这里是当按下回车时触发:
<input type="text" v-on:keyup.enter="logMsg(2)">
<br>
组合键测试,仅当按下Alt+Enter时触发:
<input type="text" v-on:keyup.alt.enter="logMsg(3)">
</div>
<script src="app3.js"></script>
</body>
</html>
app3.js
// 实例化vue对象
new Vue({
el: "#vue-app",
data: {},
methods: {
logMsg: function (k) {
console.log("事件触发了,k=" + k);
}
}
});
运行结果
