事件的基本使用：

        1. 使用v-on：xxx或@xxx 绑定事件，其中xxx时事件名

        2. 事件的回调需要配置在methods对象中，否则会在vm上

        3. methods中配置的函数，不要用箭头函数！否则this就不是vm了

        4. methods中配置的函数，都是被Vue所管理的函数，this的指向就是vm 或组件实例对象

        5. @click='demo' 和 @click='demo($event)'效果一样。但后者可以传参。

    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <button @click="showInfo1">点我显示信息1(不传参)</button>
        <button @click="showInfo2($event, 66)">点我显示信息2(不传参)</button>
    </div>
    <script>
        new Vue({
            el: '#root',
            data(){
                return{
                    name: '小屋',
                }
            },
            methods:{
                showInfo1(event){
                    alert("同学你好！")
                },
                showInfo2(event,number){
                    console.log(event, number);
                    console.log(event.target.innerText);
                    console.log(this);  // 此处的this是vm
                    alert("同学你好！！")
                }
            }
        })
    </script>

事件的修饰符

        1.prevent：阻止默认事件（常用）

        2.stop：阻止事件冒泡（常用）

        3.once：事件只触发一次（常用）

        4.capture：使用事件的捕获模式

        5.self：只有event.target是当前操作的元素时才触发事件

        6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

    <div id="app">
        <!-- prevent：阻止默认事件（常用） -->
        <a href="http://mi.com" @click.prevent="showInfo">点我去小米</a>
 
        <!-- stop：阻止事件冒泡（常用） -->
        <!-- 修饰符可以连续写 @click.prevent.stop-->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我显示信息</button>
            <a href="http://mi.com" @click.prevent.stop="showInfo">点我去小米</a>
        </div>
 
        <!-- once：事件只触发一次（常用） -->
        <button @click.once="showInfo">点我显示信息</button>
 
        <!-- capture：使用事件的捕获模式 -->
        <!-- 在父级上添加，事件的模式 由 冒泡变为捕获 -->
        <!-- son&father  到  father&son -->
        <div class="test1" @click.capture="showMsg('father')">
            1111
            <div class="test2" @click="showMsg('son')">2222</div>
        </div>
 
        <!-- self：只有event.target是当前操作的元素时才触发事件 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我显示信息</button>
        </div>
 
        <!-- passive：事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <!-- wheel 会等待事件执行完毕后，在进行下一步，使用passive可以避免此情况 -->
        <!-- scroll 无需等待 即刻执行 -->
        <ul @wheel="demo">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data(){
                return{
    
                }
            },
            methods:{
                showInfo(e){
                    alert("即将进入小米官网")
                    // console.log(e.target);
                    console.log('#');
                },
                showMsg(n){
                    console.log(n)
                },
                demo(){
                    for(var i=0; i<1000; i++){
                        console.log("#");
                    }
                }
            }
        })
    </script>

键盘事件

        1. vue中常用的按键别名

            回车 => enter

            删除 => delete  (捕获“删除”和“退格”)

            退出 => esc

            空格 => space

            换行 => tab     (特殊，必须配合keydown去使用)

            上 => up

            下 => down

            左 => left

            右 => right

        2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为caps-lock（短横线命名）

        3. 系统修饰符（用法特殊）：ctrl、alt、shift、meta

            (1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才触发。

            (2)配合keydown使用： 正常发触发事件

       4. 也可以使用keyCode去指定具体的按键（不推荐）

       5. Vue.config.keyCodes.自定义键名 = 键码， 可以去定制按键别名

    <div id="app">
        <h1>键盘事件</h1>
        <input type="text" placeholder="按回车返回value" @keyup. ="demo"><br>
        <input type="text" placeholder="未定义的键值，CapsLock" @keyup.caps-lock="demo"><br>
        <input type="text" placeholder="特殊按键：tab、ctrl、alt、shift、meta" @keydown.tab="demo"><br>
        <input type="text" placeholder="特殊按键：只用ctrl.y时可以" @keyup.ctrl.y="demo"><br>
        <input type="text" placeholder="使用keycode" @keyup.13="demo"><br>
        <input type="text" placeholder="自定义别名" @keyup.huiche="demo"><br>
    </div>
    <script>
        Vue.config.productionTip = false;   // 在启动Vue时，阻止生产信息的显示
        Vue.config.keyCodes.huiche = 13;
        new Vue({
            el:"#app",
            data(){
                return{
    
                }
            },
            methods:{
                demo(e){
                    console.log(e.target.value)
                }
            }
        })
    </script>