1.事件处理

我们可以使用v-on指令（简写为@）来监听DOM事件，并在事件触发时执行对应的JavaScript。
用法：v-on:click="methodName"或@click=“handler”事件处理器的值可以是
1.内联事件处理器：事件被触发时执行的内联JavaScript语句（与onclick类似）
2.方法事件处理器：一个指向组件上定义的方法的属性名或是路径

1.1.内联事件处理器

通常用于简单场景

<template><h3>方法事件处理器</h3><button @click="addCount">Add</button><button @dblclick="addCount">Add</button><p>{{ count }}</p>
</template><script>export default {data() {return{count:0}   },//所有的方法都放在methodsmethods:{addCount(){console.log("点击了");this.count++;}}}
</script>

2.事件参数

事件参数可以获取Event对象和通过事件传递参数

<template><h3>方法事件处理器</h3><button @click="addCount('hello')">Add</button><p>{{ count }}</p>
</template><script>export default {data() {return{count:0}   },//所有的方法都放在methodsmethods:{addCount(msg){//Vue中的event对象，就是原生JS的Event对象//e.target.innerHTML = "Add" + this.count;console.log(msg);this.count++;}}}
</script>

2.1.传参过程中获取Event

<template><h3>事件传参</h3><p @click="getNameHandler(item,$event)" v-for="(item,index) of names" :key="index">{{ item }}</p>
</template><script>
export default {data() {return{names:["iwen","ime","frank"]}   },//所有的方法都放在methodsmethods:{getNameHandler(name,e){console.log(name);console.log(e);}}
}
</script>

3.事件修饰符

为了简化代码在处理事件的时候调用event.preventDefault()等很常见。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理DOM事件的细节会更好为解决这一问题，Vue为 v-on 提供了时间修饰符，常用的如下.stop（阻止事件冒泡）	.prevent（阻止默认事件）	.once（事件只会触发一次）	.enter（回车）等

3.1.阻止默认事件+阻止事件冒泡

<template><h3>事件修饰符</h3><!-- 阻止默认事件 --><a @click.prevent="clickHandle" href="https://www.baidu.com/">百度</a><!-- 阻止事件冒泡 --><div @click="clickDiv"><!-- 不加.stop会使点击子元素把父元素的事件也触发了 --><p @click.stop="clickP">测试冒泡</p></div>
</template><script>
export default {data() {return{names:["iwen","ime","frank"]}   },//所有的方法都放在methodsmethods:{clickHandle(e){//阻止默认事件//e.preventDefault();console.log("点击了");},clickDiv(){console.log("DIV");},clickP(e){//阻止事件冒泡//e.stopPropagation();console.log("P");}}
}
</script>