lovecoding
/
web0715


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background: #00f;
        }
        .box2 {
            width: 400px;
            height: 400px;
            background: #f00;
            margin-top: 40px;
        }
        .box3 {
            width: 200px;
            height: 200px;
            background: #ff0;
        }
        .box4 {
            width: 300px;
            height: 300px;
            background: pink;
            margin-top: 20px;
        }
        .box5 {
            width: 400px;
            height: 400px;
            background: #0f0;
            margin-top: 40px;
        }
        .box6 {
            width: 200px;
            height: 200px;
            background: #0ff;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
            事件綁定:
            v-on 用于事件綁定  可以：@
            格式：
            @事件名="事件方法"
            v-on:事件名 = "事件方法"
            修飾符：
                阻止默認事件 .prevent
                阻止事件冒泡 .stop
                觸發一次 .once
                觸發自身 .self
                .native 穿透 
        -->
        <input type="text" v-on:keydown="showKeyDown">
        <input type="text" v-on:keyup="showKeyUp">
        <input type="text" v-on:keydown.a="showKeyTab">
        <br>
        <div class="box1" v-on:click="getBox1"></div>
        <!-- <div class="box1" @click="getBox1"></div> -->
         <a href="https://www.baidu.com" @click.prevent="getHi">你好</a>
         <div class="box2" @click="getBox2">
            <div class="box3" @click.stop="getBox3"></div>
         </div>
         <div class="box4" @click.once='getBox4'></div>
         <div @click.self="getBox5" class="box5">
            <div @click="getBox6" class="box6"></div>
         </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                getBox1() {
                    alert("Box1")
                },
                getHi() {
                    alert("你好")
                    // event.preventDefault()
                },
                getBox2() {
                    alert("Box2")
                },
                getBox3() {
                    alert("Box3")
                    // event.stopPropagation()
                },
                getBox4() {
                    console.log('box4')
                },
                getBox5() {
                    console.log('box5')
                },
                getBox6() {
                    console.log('box6')
                },
                showKeyDown(e) {
                    console.log("按下",e)
                },
                showKeyUp() {
                    console.log("擡起")
                },
                showKeyTab(e) {
                    console.log(e)
                }
            }
        })
    </script>
</body>
</html>