当前位置：首页 > web >正文

Vue基础知识-methods事件绑定（@事件名和v-on:事件名）和常用事件修饰（.prevent/.stop/.once/.enter）

web 2025/8/31 9:22:53

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script>
</head>
<body><div id="root"><!--<input type="button" @click="alert(1)" value="删除"/> 错误写法。vm没有alert的属性或者方法--><input type="button" @click="showInfo($event,1)" value="删除"/> <!--@click等价v-on:click。需要用到事件使用$event占位即可--><input type="button" @click="showInfo2" value="无参"/> <!--事件对象自动传递,可选择性接受--><!--事件修饰符：.prevent    阻止默认事件.stop       阻止向外冒泡.onece      仅执行一次事件.....--><form><input type="submit" value="阻止提交" @click.prevent="submit" /></form><!--事件是向内收集，向外冒泡执行--><div id="div1" @click="showInfo($event,1)"><input type="button" @click.stop="showInfo($event,2)" value="阻止向外冒泡"/></div><input type="submit" value="仅执行一次事件" @click.once="showInfo($event,2)" /><!--键盘事件修饰：回车  -  enter.....--><input type="text" placeholder="回车提交" @keyup.enter.prevent="submit" /></div><style>*{margin: 10px;}#div1{background-color: aqua;}</style>
</body><script>const vm = new Vue({el:'#root',data() {return {name:'th'}},//Vue不会将方法写进vm._data而写进vm.。因为写进_data里面的属性由Vue实现数据代理和数据劫持。而方法不需要这两个methods: {  //methods里面的方法都是vm管理的。方法里的this是vm或组件实例对象。若写成箭头函数，则this==window。showInfo(e,id){//console.log(e.target.value) 获取触发事件对象的value//console.log(this == vm) 此处this==vmalert(id)},showInfo2(e){ //无参写法可以直接接收事件，有参必须写$event占位alert('无参写法')},submit(e){//或者 e.preventDefault();来阻止提交alert('提交成功')}}})</script></html>

代码核心功能模块总结

一、事件绑定基础用法

事件绑定语法
- 使用@事件名或v-on:事件名绑定事件，如@click="showInfo($event, 1)"
- 有参数时需用$event显式传递事件对象，无参数时可直接绑定函数名
事件处理函数定义
- 在Vue的methods中定义函数，函数内this指向 Vue 实例（vm）
- 禁止使用箭头函数，否则this会指向window

methods: {// 正确写法：this指向vmshowInfo(e, id) { ... },// 错误写法：箭头函数会导致this指向错误showInfo: (e, id) => { ... }
}

二、事件修饰符核心应用

.prevent - 阻止默认事件
- 示例：@click.prevent阻止按钮点击的默认行为
- 典型场景：防止表单提交时页面刷新

<form><input type="submit" @click.prevent="submit" />
</form>

.stop - 阻止事件冒泡
- 事件冒泡：子元素事件触发后会向父元素传播
- 示例：按钮点击时通过@click.stop阻止外层div的事件触发

<div @click="handleParent"><button @click.stop="handleChild">点击</button>
</div>

.once - 事件仅执行一次
- 适用于按钮防重复点击、初始化事件等场景
- 示例：@click.once="initData"

三、键盘事件处理机制

按键修饰符
- 常用修饰符：.enter（回车）、.space（空格）、.esc（退出键）
- 示例：监听回车并阻止默认提交

<input type="text" @keyup.enter.prevent="submitForm" />

组合键修饰符
- 支持.ctrl、.shift、.alt组合，如@keyup.ctrl.enter

四、事件处理关键细节

this 指向问题
- methods中的函数this自动绑定 Vue 实例，可直接访问data属性
- 箭头函数会导致this指向window，无法访问 Vue 实例
事件执行流程
- 事件捕获阶段（从外到内）→ 目标阶段 → 冒泡阶段（从内到外）
- 修饰符.capture可指定事件在捕获阶段触发