lovecoding
/
Web1020


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
							<!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">
        <!-- v-on:事件名字 = '方法名' -->
        <!-- <button v-on:click="clickFun">按钮</button> -->
        <!-- <button v-on:click="clickFun('hello',$event)">按钮</button> -->
         
        <div v-on:click.self="div1Click" class="div1">
            <!-- 在vue中获取事件对象使用 $event -->
            <!-- <div v-on:click="div2Click($event)" class="div2"></div> -->

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

         <!-- <div class="div3" v-on:contextmenu="showMenu($event)"></div> -->
         <div class="div3" v-on:contextmenu.prevent="showMenu"></div>
         <a href="https://www.baidu.com" @click.prevent="aa">11</a>
         <button @click.once="click3Fun">简写v-on事件</button>

    </div>
    <script>
        let app = new Vue({
            el:"#app",
            methods: { //放置方法函数
                clickFun:function(val,event){
                    console.log(val,event);
                },
                // clickFun(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简写");
                },
                aa() {
                    alert("你好")
                }
            },
        })
    </script>
</body>
</html>