【Vue.js學習筆記】4：事件修飾符,鍵盤事件,鍵值修飾符
阿新 • • 發佈：2018-12-26
事件修飾符
在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>
< 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);
}
}
});
執行結果
