lovecoding
/
Web1020


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .div3{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <button v-on:click="clickFun">按钮</button> -->
        <!-- <button v-on:click="clickFun('hello')">按钮</button> -->
         
        <div v-on:click="div1Click" class="div1">
            <!-- 在vue中获取事件对象使用 $event -->
            <!-- <div v-on:click="div2Click($event)" class="div2"></div> -->

            <div v-on:click.stop="div2Click($event)" class="div2"></div>
         </div>

         <!-- <div class="div3" v-on:contextmenu="showMenu($event)"></div> -->
         <div class="div3" v-on:contextmenu.prevent="showMenu"></div>

         <button @click="click3Fun">简写v-on事件</button>

    </div>
    <script>
        let app = new Vue({
            el:"#app",
            methods: { //放置方法函数
                clickFun:function(val){
                    console.log(val);
                },
                div1Click:function(){
                    console.log("div1被点击了");
                },
                div2Click:function(e){
                    // console.log(e);
                    // // 用事件对象阻止冒泡
                    // e.stopPropagation();
                    console.log("div2被点击了");
                },
                showMenu:function(e){
                    // 用事件对象阻止默认行为
                    // e.preventDefault();
                    console.log("右键菜单")
                    
                },
                click3Fun:function(){
                    console.log("v-on简写");
                }
            },
        })
    </script>
</body>
</html>