一、Vue3.x监听事件
vue中监听事件可以使用v-on:click或者 @click ,@click 为v-on:click的简写，例如：
data() { return { counter: 1 } }template模板：
div id="basic-event"> <button @click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div>二、Vue3.x定义方法 执行方法 获取数据 改变数据
业务逻辑：
export default { data() { return { num: 1, msg: "你好vue", }; }, methods: { setMsg() { this.msg = "我是方法里改变后的msg"; }, getMsg() { alert(this.msg); }, }, };template模板：
<template> <div> <h2>{{ msg }}</h2> <button @click="setMsg()">设置msg</button> <br /> <br> <button @click="getMsg()">获取msg</button> <br> <br> <h2>Num:{{num}}</h2> <button @click="num += 1">Add 1</button> </div> </template>三、Vue3.x方法传值、方法的相互调用
业务逻辑：
export default { data() { return { msg: "你好vue", }; }, methods: { setMsg(msg) { this.msg = msg; }, run() { this.getMsg() }, getMsg() { alert(this.msg); } }, };template模板：
<template> <div> {{msg}} <br> <br> <button @click="setMsg('这只执行方法传值改变msg')">执行方法传值</button> <br> <br> <button @click="run()">执行run方法</button> </div> </template>四、事件对象
有时我们还需要在内联语句处理程序中访问原始DOM事件。您可以使用特殊$event变量将其传递给方法
一、单个参数
业务逻辑：
export default { data() { return { msg: "你好vue", }; }, methods: { eventFn(e){ console.log(e); // e.srcElement dom节点 e.srcElement.style.background='red'; console.log(e.srcElement.dataset.aid); /*获取自定义属性的值*/ } }, };template模板：
<button data-aid='123' @click="eventFn($event)">事件对象</button>二、多个参数
<button @click="warn('Form cannot be submitted yet.', $event)"> Submit </button>methods: { warn(message, event) { // now we have access to the native event if (event) { event.preventDefault() } alert(message) } }五、Vue3.x 多事件处理程序
您可以在事件处理程序中使用逗号分隔多个事件处理程序，如下所示：
业务逻辑：
methods: { one(event) { // first handler logic... }, two(event) { // second handler logic... } }template模板：
<button @click="one($event), two($event)"> Submit </button>六、事件修饰符
vue中阻止冒泡 阻止默认行为，可以通过事件对象event.preventDefault()或event.stopPropagation()实现，还可以通过事件修饰符实现。
vue中给我们提供了很多的修饰符：
.stop .prevent .capture .self .once .passiv stopPropagation:
<a @click.stop="doThis"></a>preventDefault:
<a @click.prevent="doThat"></a>stopPropagation And preventDefault
<a @click.stop.prevent="doThat"></a>七、按键修饰符
监听键盘事件时，我们通常需要检查特定的键。Vue允许在监听关键事件时v-on或@在监听关键事件时添加按键修饰符：
<input @keyup.enter="submit" />Vue为最常用的键提供别名：
.enter.tab.delete（同时捕获“删除”和“退格”键）.esc.space.up.down.left.right