Vue_事件处理

一，事件的基本使用：

            1，使用v-on:xxx 或者 @xxx 绑定事件，其中xxx是事件名。如：v-on:click/@click

            2，事件的回调需要配置在methods对象中，最终会在vm上

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

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

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

事件的写法

        1， 普通写法 v-on:click 现在点击按钮

                <button v-on:click = "showInfo">点我</button>

       2， 简写

                <button @click = "showInfo1">点我(不传参)</button>

       3，不传参

                 <button @click = "showInfo1">点我(不传参)</button>

      4，传参

                <button @click = "showInfo2($event,66)">点我(传参)</button>

 事件的回调需要配置在methods对象中的写法

methods:{

不传参的写法：

                showInfo1(event){     //event事件对象

                console.log(event),       //pointerEvent

                console.log(event.target),        //事件目标(元素botton)

                console.log(event.target.innerText),        //显示元素里面的文字

                console.log(this),        //这个里面的this就是vm

                console.log(this === vm),        //证明this就是vm的途径

                alert('您好！')

            },

在methods对象里不要用箭头函数

            // showInfo:(event)=>{  //在vue里面最好都用普通函数，箭头函数在此处不是最好的方法

            //     console.log(this)  //这里面的this就不是vm的，而是全局window的

            // }

传参的写法：

            showInfo2(event,number){

                console.log(event,number),

                alert('真棒')

            }

        }

二，事件修饰符 

            1，prevent:阻止默认事件(阻止跳转到指定的网页)（常用）

            2，stop:阻止事件冒泡（常用）

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

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

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

            6，passive:事件的默认行为立即执行，无需等待事件回调执行完毕;(移动端用的比较多，多用于平板跟手机；@wheel.passive；@scroll可以不用)

分别演示一下事件修饰符的使用方法：

补充： 阻止冒泡跟阻止跳转可以一起使用，@click.stop.prevent可以同时进行，位子可以随机放

 <div class="demo1" @click = "showInfo">    

            <a href="http://www.baidu.com" @click.stop.prevent = "showInfo">点击我</a>

       </div>

三、键盘事件

         1,vue中常用的按键别名

            回车=>enter

            删除=>delete (捕获：删除键 和 退格键)

            退出=>esc

            空格=>space

            换行=>tab（特殊，必须配合keydown.tab去使用）

            上=>up

            下=>down

            左=>left

            右=>right

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

        3，系统修饰键(用法特殊)：ctrl,alt,shift,meta(win键)

            (1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才会触发;如按ctrl+y 松掉y才会触发事件

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

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

        5，vue.config.keycodes.自定义键名 = 键码，可以去定制按键别名（不推荐）

分别演示一下键盘事件的使用方法：

 补充：系统修饰键ctrl.y这样的神仙组合避免啦ctrl.跟任何字母都能触发的情况

<div id="root">

        <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y = 'showInfo'>

</div>

感谢观看，欢迎随时反馈问题。