methods选项用于定义事件处理函数，通过this访问响应式数据，模板中用@绑定事件并支持传参和修饰符，$event可获取原生事件对象。
Vue Options API 中的 methods 选项是定义事件处理函数最直接的方式，它让逻辑与模板绑定清晰、调用自然，适合中小型组件或习惯传统写法的开发者。
methods 的基本写法和 this 绑定
在 methods 对象中定义普通函数，函数内部通过 this 访问组件的响应式数据（如 data 返回的属性）、其他方法或生命周期钩子：
- 函数名即为方法名，模板中可直接引用，无需括号（如
@click="increment"） -
this指向当前组件实例，能安全读写data中的响应式字段 - 所有 methods 函数自动绑定组件上下文，不用担心
this丢失问题
在模板中绑定事件处理函数
使用 v-on（简写为 @）将 methods 中的方法绑定到 DOM 事件上：
- 基础写法：
@click="handleClick"，点击时执行handleClick方法 - 传参写法：
@input="onInput($event, 'custom')"，第一个参数固定为原生事件对象，后续为自定义参数 - 不带参数时，
$event不会自动注入；需要时必须显式写出
配合事件修饰符简化逻辑
Vue 提供的事件修饰符可避免在 methods 中手动调用 preventDefault() 或 stopPropagation()：
-
@submit.prevent：阻止表单默认提交行为 -
@click.stop：阻止事件冒泡 -
@keyup.enter：仅在按下 Enter 键时触发 - 修饰符可链式使用，例如
@click.stop.prevent
访问原生事件与自定义参数
当需要操作 DOM 元素或获取输入值时，常借助 $event：
- 在模板中传入：
@change="handleChange($event)" - 在 methods 中接收：
handleChange(event) { console.log(event.target.value); } - 也可同时传额外参数：
@click="handleClick($event, 'delete', item.id)"，对应方法签名handleClick(e, action, id)
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
