vue中点击事件或者是其他的事件可以通过在事件中添加$event进行对标签元素的dom获取或者修改标签指的属性等等。

event.srcElement就是当前这个标签元素，可以根据此属性来获取当前点击事件的标签元素。

也可以通过$event获取标签自定义的属性值

1.Vue事件处理

<div id='div1'>
    <button v-on:click="showInfo1">提示信息1</button>
    <button @click="showInfo2($event,666)">提示信息2</button>
    //@是v-on:的简写形式
<div>

<script>
    const vm=new Vue({
    el:'#div1',
    data:{},
    methods:{
        shoeInfo1(event){    //不传参默认第一个返回值是event
            console.log(event)
        }
        shoeInfo2(event,num){    //传参占用event的位置，所以button中必须显式把$event写出来
            console.log(event,num)
        }
    }

})
</script>

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

2.事件的回调需要配置在methods对象中、最终会在vm 上;
3.methods中配置的函数，不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;

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

2.Vue 事件修饰符
1.prevent: 阻止默认事件（常用）;

2.stop:阻止事件冒泡（常用);

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

4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件; 
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕; 

使用方法：@click.prevent="showInfo"

3.键盘事件

1.Vue中常用的按键别名:
回车=> enter
删除=>delete(捕获“删除”和“退格”键)

退出=>esc
空格=>space

换行=> tab(需要配合keydown使用 ，ctrl、alt、shift、meta 也都需要)

上 =>up

下 => down

左=> left

右=> right

使用方法：.enter

<input type="text" placeholder="按下回车提示输入内容" @keyup.enter="showInfo">

<script>
    const vm=new Vue({
    el:'#div1',
    data:{},
    methods:{
        shoeInfo(event){    //不传参默认第一个返回值是event
            console.log(event.target.value)
            //console.log(e.key) //Enter
            //console.log(e.keyCode) //13
        }
    }

})

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

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

(2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐)
5.Vue.config.keyCodes.自定义键名=键码,可以去定制按键别名
 

4.事件总结

1)同时阻止默认事件和阻止冒泡：

@click.prevent.stop="showInfo" 或者@click.stop.prevent="showInfo" 能达到同样的效果

2）同时按下ctrl+a才能触发

 @keyup.ctrl.a="showInfo"