Vue的事件处理

一、事件的基本使用：

1.使用v-on:xxx或@xxx 绑定事件,其中xxx是事件名；

<button v-on:click="showInfo">点我提示信息</button>

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

new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            },
            methods:{
                showInfo1(){
                    alert('同学你好')
                },
                showInfo2(event,number){
                    console.log(event,number);
                    alert('bb')
                }
            }
        })

3.methods中配置的函数，都是被Vue所管理的函数，否则this就不是vm了；

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

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

<button @click="showInfo1">点我提示信息1(不传参)</button>
        <button @click="showInfo2($event,66)">点我提示信息2(传参)</button>

new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            },
            methods:{
                showInfo1(){
                    alert('同学你好')
                },
                showInfo2(event,number){
                    console.log(event,number);
                    alert('bb')
                }
            }
        })

 二、Vue中事件修饰符：

1.prevent:阻止默认事件；(常用)

 例：

<a href="http://www.baidu.com" @click.prevent='Info'>点我提示信息</a><!--.prevent阻止默认行为-->

2.stop：阻止事件冒泡；(常用)

  例：

<div class="demo1" @click='Info'>
            <button @click.stop='Info'>点我提示信息</button>
        </div>

3.once：事件只触发一次；(常用)

  例：

<button @click.once='Info'>点我提示信息</button>

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

  例：

<div class="box1" @click.capture='Mege(1)'>
            div1
            <div class="box2" @click='Mege(2)'>
                div2
            </div>
        </div>

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

 例：

<div class="demo1" @click.self='Info'>
            <button @click='Info'>点我提示信息</button>
        </div>

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

<ul @wheel.passive='demo'><!--wheel鼠标滚动轮的滚动，scroll窗口滚动-->
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

三、键盘事件

1.Vue中常用的按键别名：

               回车 => enter

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

               退出 => esc

               空格 => space

               换行 => tab

               上 => up

               下 => down

               左 => left

               右 => right

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

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

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

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

               

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

new Vue({
            el:'#root',
            data:{
                  name:'尚硅谷'
            },
            methods:{
                showInfo(e){
                    // if(e.keyCode!==13) return
                    console.log(e.target.value);
                }
            }
        })

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

Vue.config.keyCodes.huiche=13//定义了一个别名按键