lovecoding
/
VIP32


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!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: 400px;
            height: 400px;
            background: #00f;
        }
        #box2 {
            width: 200px;
            height: 200px;
            background: #f00;
            margin-top: 20px;
        }
        #box3 {
            width: 400px;
            height: 400px;
            background: #f0f;
            margin: 30px;
        }
        #box4 {
            width: 200px;
            height: 200px;
            background: #0f0;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
            v-on 用于事件绑定 简写："@"
            格式:
                @事件名="事件方法"
                v-on:事件名="事件方法"
            修饰符：
                阻止事件冒泡 .stop
                阻止默认事件 .prevent
                触发一次     .once
                触发自身     .self
                ...
            键盘事件：
                keydown keyup
         -->
         <!-- 键盘事件 -->
         <input type="text" @keydown.tab="showDown">
         <input type="text" @keyup.enter="showUp">
         <input type="text" @keyup.esc="showUp">
         <input type="text" @keyup.g="showEnter">
         <!-- 点击事件 -->
         <div v-on:click="getPart1">事件方法</div>
         <!-- <div @click="getPart1">点击事件</div> -->
         <!-- 默认事件 -->
         <a href="http://www.baidu.com" @click.prevent="goPart2">去百度</a>
         <!-- 事件冒泡 -->
         <div id="box1" @click="getBox1">
            <div id="box2" @click.stop="getBox2"></div>
         </div>
         <!-- 触发一次 -->
         <div @click.once="getPart3">only</div>
         <!-- 触发自身 -->
         <div id="box3" @click.self="getPart4">
            <div id="box4" @click="getPart5">我自己</div>
         </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                getPart1() {
                    console.log("点击")
                },
                goPart2() {
                    alert("新的")
                },
                getBox1() {
                    console.log("第一个盒子")
                },
                getBox2() {
                    console.log("第二个盒子")
                },
                getPart3() {
                    console.log("3333");
                },
                getPart4() {
                    console.log("大盒子");
                },
                getPart5() {
                    console.log("我自己")
                },
                showDown() {
                    alert("1111")
                },
                showUp() {
                    alert("2222")
                },
                showEnter(event) {
                    console.log(event.target)
                }
            }

        })
    </script>
</body>
</html>