以下方法在底部代碼中可參考···
鼠標事件
點擊（單擊）：@click="方法名" ；
雙擊 ： @dblclick="方法名" ；
鼠標按下： @mousedown="方法名" ；
鼠標抬起： @mouseup="方法名" ；
鼠標移動： @mousemove="方法名" ；
鼠標離開： @mouseleave=“方法名” ；
鼠標離開： @mouseout=“方法名” ；
*mouseleave和mouseout的區別在於mouseout有冒泡行為。
鼠標進入： @mouseenter="方法名" ；
鼠標進入： @mouseover="方法名" 。
*mouseenter和mouseover的區別在於mouseover有冒泡行為。
鼠標滾輪事件
滾輪滾動： @mousewheel="方法名" 。
鍵盤事件
@keydown（鍵盤按下時觸發）
@keyup(鍵盤彈起)
@keypress(鍵盤按住時觸發)
獲取按鍵的鍵碼 e.keyCode
方法后面跟keyCode值可以直接綁定鍵盤按鍵
@keyup.13 按回車鍵
@keyup.enter 回車
@keyup.up 上鍵
@keyup.down 下鍵
@keyup.left 左鍵
@keyup.right 右鍵
@keyup.delete 刪除鍵
@keyup.space 空格
<template>
<div>
<h3>鼠標事件</h3>
<div class="mouse-body">
<b>click 鼠標單擊</b>
<div class="mouse-div" @click="click1"></div>
<b>dblclick 鼠標雙擊</b>
<div class="mouse-div" @dblclick="click2"></div>
<b>mousedown 鼠標按下</b>
<div class="mouse-div" @mousedown="click3"></div>
<b>mouseup 鼠標抬起</b>
<div class="mouse-div" @mouseup="click4"></div>
<b>mousemove 鼠標移動</b>
<div class="mouse-div" @mousemove="click5">{{num}}</div>
<b>mouseleave 鼠標離開（leave）</b>
<div class="mouse-div" @mouseleave="click6">
{{num2}}
<div style="width:50px;height:50px;border:1px blue solid"></div>
</div>
<b>mouseout 鼠標移出（out）這個離開包含了事件冒泡</b>
<div class="mouse-div" @mouseout="click7">
{{num3}}
<div style="width:50px;height:50px;border:1px blue solid"></div>
</div>
<b>mouseenter 鼠標進入（enter）</b>
<div class="mouse-div" @mouseenter="click8">
{{num4}}
<div style="width:50px;height:50px;border:1px blue solid"></div>
</div>
<b>mouseover 鼠標移入（over）這個移入包含了事件冒泡</b>
<div class="mouse-div" @mouseover="click9">
{{num5}}
<div style="width:50px;height:50px;border:1px blue solid"></div>
</div>
<b>mousewheel 鼠標滑輪滾動</b>
<div class="mouse-div" @mousewheel="click10"></div>
</div>
<h3>鍵盤事件</h3>
<div>
<input type="text" @keydown.space="key" />
</div>
<h3>事件修飾符</h3>
<div>
<input type="checkbox" @click.prevent="clickbox" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
num: "",
num2: "",
num3: "",
num4: "",
num5: ""
};
},
methods: {
click1() {
console.log("鼠標單擊");
},
click2() {
console.log("鼠標雙擊");
},
click3() {
console.log("鼠標按下");
},
click4() {
console.log("鼠標抬起");
},
click5() {
console.log("鼠標抬起");
this.num++;
},
click6() {
this.num2++;
},
click7() {
this.num3++;
},
click8() {
this.num4++;
},
click9() {
this.num5++;
},
click10() {
console.log(1111);
},
key(e) {
console.log(e);
},
clickbox() {
console.log("事件修飾符");
}
}
};
</script>
<style>
.mouse-body {
display: flex;
flex-direction: column;
align-items: center;
}
.mouse-div {
width: 200px;
height: 200px;
border: solid 1px red;
}
</style>