Vue 事件处理 传参 以及事件的修饰符 的学习

事件处理

在vue中使用v-on来进行监听事件，可以简写成@

两种展示方式

内联事件处理器（较为简单  理解就行）
方法事件处理器

两者的区别就是 内联事件处理器是直接写在v-on里面的，
<button @click="count++">自增</button>
方法事件处理器是写在js里面的
<button @click="addCount">点击自增</button>
<p>{{ count }}</p>

事件传参

vue中的event对象就是原生js中获取对象的方式

传递参数

可以直接在@click=“addCount(参数)”  传递给下面的方法里面，
假如想要继续获取到event对象，直接在item后面添加 $event
例如这个：
<p @click="getNames(item)" v-for="(item,index) of names ">{{ item }}</p>
getNames(name){
        console.log(name)
    }

事件修饰符

目的以及理解

就是为了简化代码，使用一些常用的event的对象的时候，可以使用	一些事件修饰符更快的去解决问题

例如

阻止事件进行
<a @click.prevent="handle($event)" href="baidu,com">百度</a>
虽然点击了 但是页面不进行跳转

阻止事件冒泡（触发子元素的同时父元素也一起触发称为冒泡）

<div @click="clickDiv">
<a @click.stop="clickA">测试事件冒泡</a>
</div>
js里面有两个打印的进行测试