030——VUE中鼠标语义修饰符 

<!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>

　　

posted @ 2017-12-27 07:22  生如逆旅，一苇以航  阅读(892)  评论(0)    收藏  举报