定义&缩写

事件定义以及缩写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
<button @click="msg"></button>
<button @mousedown="add"></button>
<!--如果不传递参数,则不要写括号会自动传入事件源,如果写括号了,要手动传入$event属性-->
</div>

let vm = new Vue({
el:"#app",
methods:{
msg(){
console.log(Math.random());
}
}
})

methods和data中的数据会全部放在vm上,而且名字不能冲突,冲突会报错,methods中的this指向的都是实例

mousedown

当鼠标指针移动到元素上方,并按下鼠标按键(左、右键均可)时,会发生 mousedown 事件。
与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。

mouseup

当在元素上松开鼠标按键(左、右键均可)时,会发生 mouseup 事件。
与 click 事件不同,mouseup 事件仅需要松开按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。

click

当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click 事件。
注意:触发click事件的条件是按下并松开鼠标左键!,按下并松开鼠标右键并不会触发click事件。
三个事件的触发顺序

总结

若在同一个元素上按下并松开鼠标左键,会依次触发mousedown、mouseup、click,前一个事件执行完毕才会执行下一个事件
若在同一个元素上按下并松开鼠标右键,会依次触发mousedown、mouseup,前一个事件执行完毕才会执行下一个事件,不会触发click事件