<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>运算结果：{{count}}</h1>
        <p>--------------------</p>
        <button v-on:click="add">+</button>
        <button @click="sub">-</button>
        <p>--------------------</p>
        <button @click="btn1click()">btn1</button>
        <button @click="btn2click">btn2</button>
        <button @click="btn3click(1,'a',true,msg)">btn3</button>
        <button @click="btn4click(1,'a',true,msg,$event)">btn4</button>
        <p>--------------------</p>
        <!-- 1、阻止冒泡 -->
        <div class="box" @click="boxClick">
            <button @click.stop="btn5click">btn5</button>
        </div>
        <p>--------------------</p>
        <!-- 2、阻止默认事件 -->
        <form action="http://www.baidu.com">
            <input type="submit" value="submit" @click.prevent="doSubmit">
        </form>
        <a href="http://www.baidu.com" @click.prevent="aClick">baidu</a>
        <p>--------------------</p>
        <!-- 3、响应一次事件 -->
        <button @click.once="btn6click">btn6</button>
        <p>--------------------</p>
        <!-- 4、键盘事件 -->
        <input type="text" @keyup="getMsg">
        <input type="text" @keyup.enter="getMsg">
    </div>
    <script src="js/vue.3.2.2.js"></script>
    <script>
        // 1、创建Vue的实例对象
        const app = Vue.createApp({
            data(){//定义数据
                return {
                    msg:'你好！',
                    count: 0
                }
            },
            methods:{
                add(){
                    this.count++;
                },
                sub(){
                    this.count--;
                },
                boxClick(){
                    console.log("box");
                },
                btn1click(arg1){
                    console.log(arg1);//undefined
                },
                btn2click(arg1){
                    console.log(arg1);//事件对象
                },
                btn3click(arg1,arg2,arg3,arg4){
                    console.log(arg1,arg2,arg3,arg4);
                    console.log(arguments);
                },
                btn4click(arg1,arg2,arg3,arg4,event){
                    console.log(arg1,arg2,arg3,arg4,event);
                    console.log(arguments);
                },
                btn5click(event){
                    // event.stopPropagation();//阻止外层div触发点击事件
                    console.log("btn5");
                },
                btn6click(arg1){
                    console.log("btn6");
                },
                doSubmit(event){
                        //阻止默认事件
                    // event.preventDefault();
                    console.log("submit");
                },
                aClick(event){
                    //阻止默认事件
                    // event.preventDefault();
                    console.log("a");
                },
                getMsg(event){
                    console.log(event.keyCode);
                    console.log("input");
                    console.log(event);
                }
            }
        }).mount('#app');
    </script>
</body>
</html>