基础语法
v-on
该指令用于绑定事件
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>{
{count}}</h1>
<button v-on:click="add">click</button>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
count: 0
},
methods: {
add() {
this.count++
}
},
})
</script>
</body>
</html>
v-on 简写形式
代码示例
<button @click="add">click</button>
在vue2中使用时，值得注意的点
事件绑定：v-on 指令用于绑定 DOM 事件监听器。你可以通过它来监听元素上的各种事件，如点击事件、输入事件等。例如，v-on:click="handleClick" 将会在点击事件触发时调用名为 handleClick 的方法。
方法定义：在 Vue 组件中，你需要在 methods 属性中定义方法来处理事件回调。确保在 Vue 实例或组件的 methods 对象中定义了与绑定的事件处理函数匹配的方法。例如，如果使用 v-on:click="handleClick"，则需要在该组件的 methods 中定义一个名为 handleClick 的方法。
传递参数：你可以通过 v-on 来传递自定义参数给事件处理函数。例如，v-on:click="handleClick(item)" 会将 item 作为参数传递给 handleClick 方法，以便在方法内部进行处理。
事件修饰符：Vue 提供了一些方便的事件修饰符，用于在事件处理程序中做一些额外的处理。例如，.stop 可以阻止事件冒泡，.prevent 可以阻止默认事件，.once 可以只触发一次事件等。你可以像这样使用：v-on:click.stop="handleClick"。
动态事件名：你还可以使用动态属性来绑定事件名。例如，v-on:[eventName]="handleClick"，其中 eventName 是一个动态属性，它的值将作为事件名传递给 handleClick 方法。
缩写语法：为了简化模板代码，Vue 2 提供了一个缩写语法 @，可以将 v-on 替换为 @。例如，v-on:click="handleClick" 可以简写为 @click="handleClick"。
避免过多处理函数：当在循环中使用 v-on 绑定事件时，要确保不要在每次循环中创建新的函数。如果需要传递额外的参数给事件处理函数，可以考虑使用函数柯里化或箭头函数来避免创建多个函数实例。
常用修饰符：Vue 2 中常用的事件修饰符有 .stop、.prevent、.capture、.self、.once 等。了解这些修饰符可以更好地处理事件
关于传参
你没有传递额外参数时，事件对象会自动作为第一个参数传递给事件处理函数，你可以直接访问它，无需显式地传递。
而当你传递了额外参数时，你可以使用 $event 这个特殊变量来占位，以便在参数列表中留出位置接收事件对象。这样你就可以在事件处理函数中通过 $event 参数获取事件对象。
所以，总结起来：
如果不传递额外参数，事件对象会自动传递给事件处理函数，并作为第一个参数。
如果传递额外参数，使用 $event 占位来接收事件对象，确保在参数列表中的位置顺序正确。
这样你就可以灵活地在事件处理函数中访问事件对象，无论是否传递额外参数。
如何用呢
触发搜索操作：
<input v-model="searchTerm" @keyup.enter="search">
当用户在输入框中按下 Enter 键时，search 方法会被触发，执行搜索操作。
提交表单数据：
<form @submit="submitForm">
<!-- 表单字段 -->
<button type="submit">提交</button>
</form>
`
当用户点击提交按钮或者按下 Enter 键时，submitForm 方法会被调用，用于处理表单数据的提交。
执行删除操作：
<ul>
<li v-for="item in items" :key="item.id">
{
{ item.name }}
<button @click="deleteItem(item.id)">删除</button>
</li>
</ul>
每个列表项后面都有一个删除按钮，当点击按钮时，deleteItem 方法会被触发，以执行对应的删除操作。
显示/隐藏元素：
<button @click="showElement = !showElement">{
{ showElement ? '隐藏' : '显示' }}</button>
<div v-if="showElement">要显示的内容</div>
在这个示例中，当用户点击按钮时，showElement 的值会切换，从而决定是否显示要显示的内容。
发送请求并处理响应：
<button @click="sendRequest">发送请求</button>
methods: {
sendRequest() {
axios.get('/api/data')
.then(response => {
// 处理响应数据
})
.catch(error => {
// 处理错误
});
}
}
当用户点击按钮时，sendRequest 方法会发送一个异步请求，并根据响应来处理数据或错误。
谢谢款待
