lovecoding
/
W0407


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
							<!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>
        #box {
            width: 400px;
            height: 400px;
            background: #00f;
        }
        #box1 {
            width: 200px;
            height: 200px;
            background: #ff0;
        }
        .news {
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 1px solid #f00;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
            v-on 事件绑定 可以简写成 @
            格式：
                @事件名="事件方法"
               v-on:事件名="事件方法"
            修饰符
                stop 阻止事件冒泡
                prevent 阻止默认事件
                once 只触发一次
                self 仅自身才能触发
                native 组件无法绑定原生时间 可以使用native绑定
            @keydown @keyup
        -->
        <h1>{{msg}}</h1>
        <input type="text" @keydown="keyThing">
        <!-- <div v-on:click="getPart1">事件发生</div> -->
        <div @click="getPart1">事件发生</div>
        <a href="https://www.baidu.com" @click.prevent.once="showHi">你好</a>
        <div id="box" @click="getPart2">
            <div id="box1" @click.stop="getPart3"></div>
        </div>
        <button @click.once="pay">一次性支付</button>
        <div class="news" @click.self="newThing">
            <span @click="newHi" style="width: 100px;height: 100px;background: #000;color: #fff;">你好啊</span>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                msg:"你好啊"
            },
            methods:{
                keyThing(event) {
                    console.log(event,'键盘')
                },
                getPart1() {
                    console.log("触发一")
                },
                getPart2() {
                    console.log("触发2")
                },
                getPart3(event){
                    // event.stopPropagation(); 
                    console.log("触发3")
                },
                showHi(event) {
                    // event.preventDefault();
                    console.log("你好",event)
                },
                pay() {
                    console.log("支付")
                },
                newThing() {
                    console.log("哈哈哈哈")
                },
                newHi() {
                    console.log("你好")
                }
            }
        })
    </script>
</body>
</html>