以下方法在底部代码中可参考···
鼠标事件
点击（单击）：@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>
