lovecoding
/
vipAllDay


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-on:"事件名"="事件方法" => @事件名"="事件方法" -->
        <!-- 键盘事件
            @keydown/@keyup/@keypress.修饰字符 
        -->
        <!-- 
            修饰符：
                触发一次 .once
                阻止默认行为 .prevent
                阻止事件冒泡 .stop
                触发自身 .self
                .... .native ...
         -->
        <input type="text" v-on:keydown.g="showMain">
        <div @click.once="part1">哈哈哈哈</div>
        <a @click.prevent="part2" href="http://www.baidu.com">大大大大大大</a>
        <div @click="part3" style="width: 300px;height: 300px;background-color: red;">
            <div @click.stop="part4" style="width: 100px;height: 100px;background-color: #ff0;"></div>
        </div>
        <div @click.self="part5" style="width: 300px;height: 300px;background-color: red;margin-top: 100px;">
            <div @click="part6" style="width: 100px;height: 100px;background-color: #ff0;"></div>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            methods: {
                showMain() {
                    console.log("按下")
                },
                part1() {
                    console.log("点击")
                },
                part2() {
                    console.log("哒哒哒")
                },
                part3() {
                    console.log("333")
                },
                part4() {
                    console.log("444")
                },
                part5() {
                    console.log("555")
                },
                part6() {
                    console.log("666")
                },
            },
        }).$mount("#app")
    </script>
</body>
</html>