vue中的事件处理

        事件的基本使用:

              1.使用v-on :xxx 或 @xx×绑定事件,其中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 v-on:click = 'showInfo'>点我提示信息</button> -->
        <button @click = 'showInfo1'>点我提示信息1(不传参)</button>
        <button @click = 'showInfo2($event,66)'>点我提示信息2(传参)</button>
    </div>
    <script>
        Vue.config.productionTip = false;//阻止 vue 在启动时生成生产程序

        const vm = new Vue({
            el:'#root',
            data:{
                name:'张三'
            },
            methods:{
                showInfo1(event){
                    console.log(event);
                    // console.log(this);//此处的this 是 vm
                    alert('同学你好!');
                },
                showInfo2(event,number){
                    console.log(event,number);
                    alert('同学你好!!!');
                }
            }
        })
    </script> 

事件修饰符

        Vue中的事件修饰符:

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

            2.stop:阻止事件冒池（常用）;

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

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

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

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

    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent阻止默认事件（常用） 点击后弹出信息之后，会跳转页面，prevent可以阻止-->
        <a href="https://www.bilibili.com/" @click.prevent = 'showInfo'>点我提示信息</a>
        
        <!-- stop阻止事件冒泡（冒泡） -->
        <div @click = 'showInfo'>
            <button @click.stop = 'showInfo'>点我提示信息</button>
            <!-- click.prevent.stop修饰符可以连续写 -->
            <!-- <a href="https://www.bilibili.com/" @click.prevent.stop = 'showInfo'>点我提示信息</a> -->
        </div>
        
        <!-- once事件只触发一次（常用） -->
        <button @click.once = 'showInfo'>点我提示信息</button>
       
        <!-- capture使用事件捕获模式 -->
        <div class="box1" @click.capture = 'showMsg(1)'>
            div1
            <div class="box2" @click = 'showMsg(2)'>
                div2
            </div>
        </div>

        <!-- self只有event.target是当前操作的元素是才触发事件 -->
        <div @click.self = 'showInfo'>
            <button @click = 'showInfo'>点我提示信息</button>
        </div>

        <!-- passive事件的默认行为立即执行，无需等待事件回调执行完毕 wheel鼠标滚轮滚动事件 scroll滚动条滚动事件 -->
        <ul class="list" @wheel.passive="demo">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script>
          Vue.config.productionTip = false;//阻止 vue 在启动时生成生产程序


          const vm = new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            },
            methods:{
                showInfo(e){
                    alert('同学你好');
                    // console.log(e.target);
                },
                showMsg(Msg){
                    console.log(Msg);
                },
                demo(){
                    for (let i = 0; i < 100000; i++) {
                       console.log('#');
                    }
                    console.log('累坏了');
                }
            }
          })
    </script>

键盘事件

        1.Vue中常用的按键别名:
                回车=>enter
                删除=>delete（捕获删除”和“退格”健)退出=>esc
                空格=>space
                换行=>tab（特殊，必须配合keydown去使用)上=>up
                下=>down
                左=>left
                右=>right

        2.Vue未提供别名的按键，可以使用按健原始的key值去绑定，但注意要转为kebab-case(短横线命名)

        3.系统修饰健（用法特殊）:ctrl、alt、 shift、meta
               (1).配合keyup使用:按下修饰键的同时，再按下其他健，随后释放其他健，事件才被触发。
               (2).配合keydown使用:正常触发事件。

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

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

     <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" @keyup="showInfo">
    </div>
    <script>
        Vue.config.productionTip = false;//阻止 vue 在启动时生成生产程序

        const vm = new Vue({
            el:'#root',
            data:{
                name:'北京',
            },
            methods:{
                showInfo(e){
                    // console.log(e.key);//查询按键的名
                    console.log(e.target.value);
                }
            }
        })
    </script>