<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标修饰符的事件</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="demo">
<!--点击鼠标左键触发事件：-->
<!--<div @click.left="divEvent">点击鼠标左键触发事件</div>-->
<!--点击鼠标右键触发事件：并阻止默认右键菜单-->
<!--<div @click.right="divEvent" oncontextmenu="return false">点击鼠标右键触发事件</div>-->
<!--点击鼠标右键触发事件：并阻止默认右键菜单-->
<!--<div @contextmenu.prevent="divEvent">点击鼠标右键触发事件</div>-->
<!--点击鼠标滚轮触发事件：并阻止默认右键菜单-->
<div @click.middle="divEvent">点击鼠标滚轮</div>
</div>
<script>
new Vue({
el:"#demo",
methods:{
divEvent(){
alert("鼠标事件");
}
}
});
</script>
</body>
</html>