在 Vue 中，事件是指 DOM 元素上发生的各种行为或动作，例如点击、改变输入值、滚动等。Vue 可以通过绑定事件监听器来响应这些事件。
比如：我们可以使用 v-on 指令（简写为 @）来绑定事件监听器，例如：
<button v-on:click="handleClick">Click me</button>
给按钮元素绑定一个 click 事件监听器，当用户点击按钮时，handleClick 方法就会被调用。这个就是所谓的事件处理，事件就是鼠标点击，要进行的处理就是handleClick的方法内容
事件处理
在Vue中，有许多种方法可以处理事件（事件：发生的各种事情，比如键盘点击、鼠标移动...）。以下是一些常用的方法：
@click: 这是处理点击事件最常用的方式。例如，您可以在网页上单击一个按钮来触发一个函数，在Vue中使用方式如下：
<button @click="myFunction">Click Me</button>
@submit: 用于处理表单提交事件。例如，您可以在网页上提交一个表单，然后将表单数据传递给Vue组件，使用方式如下：
<form @submit.prevent="mySubmitFunction">
<!-- Your form inputs here -->
<button type="submit">Submit</button>
</form>
@change: 用于处理表单元素(如 input, select, textarea )的值变化事件。例如，您可以在网页上使用文本框组件，然后将文本框的值绑定到Vue的数据模型中。当文本框的值发生变化时，Vue会自动更新数据模型，使用方式如下：
<input type="text" v-model="myText" @change="myChangeFunction">
@keydown: 用于处理键盘按键事件。例如，您可以在网页上使用文本框组件，当用户按下键盘上的键时，触发一个函数，使用方式如下：
<input type="text" v-model="myText" @keydown="myKeyDownFunction">
@mouseover: 用于处理鼠标悬停事件。例如，您可以在网页上使用图像组件，在用户将鼠标指针悬停在图像上时，触发一个函数，使用方式如下：
<img src="my-image.png" @mouseover="myMouseOverFunction">
这些是Vue中的一些简单的事件处理方法。你可以根据您的项目需求使用这些或类似的方法。
下面用其中一个click来介绍用法：
click事件
@click的全称为：v-on:xxx ，@click:xx 是简写模式，其中xx是方法名（该方法就是处理内容）
<body>
<!-- 这就是容器 -->
<div id="root">
<h1>{{name}} </h1>
<!-- 双向绑定 -->
<h2>Hello</h2>
<button v-on:click="showInfo" >点我看更多信息</button>
<!-- click的简写 -->
<button @click="show" >其它的信息</button>
<button @click="other" >更多</button>
<button @click="choose($event,num)" >传参</button>
</div>
<script type="text/javascript">
// 这是实例
const a = new Vue({
data(){
return{
name: '每天学一点',
userJob: 'good good'
}
},
methods:{
show(){
console.log("没有参数时，默认传event_事件对象")
console.log(event.target)
// 会打印 <button>其它的信息</button> || event.target.innerText
console.log(this) //此处的this是 vue实例
},
other:()=>{
console.log(this) //此处的this是 window实例
},
showInfo(){
alert("world")
},
choose(event,num){
console.log(event)
console.log(num)
}
}
});
a.$mount('#root');
</script>
</body>
注意：
1.methods中配置的函数，不要使用箭头函数，否则this的指向就不是vue实例（组件实例对象）
3.方法中没写参数时，会默认传一个event-事件对象
3.需要传event-事件对象时，记得用'$'符占位
4.为什么要传事件对象，它有什么作用？
因为：事件对象提供了有关事件的详细信息，例如事件的类型、目标元素和鼠标位置等。通过分析事件对象，开发人员可以编写更加精确和灵活的事件处理程序。
- 阻止默认行为或冒泡：
event.preventDefault()和event.stopPropagation()- 访问事件目标元素：
event.target- 获取事件类型：
event.type- 获取按下的键值：
event.key- 获取鼠标点击的位置：
event.clientX和event.clientY
事件修饰符
在Vue中，事件修饰符可以用于改变事件的默认行为。以下是常用事件修饰符：
.stop: 阻止事件冒泡.prevent: 阻止事件的默认行为.once: 只触发一次.capture: 以捕获模式添加事件侦听器.self: 只有当事件是从事件目标本身触发时才触发处理程序.passive: 指示事件处理程序不会调用 preventDefault()
其中，.stop和.prevent是最常用的事件修饰符，用于阻止事件冒泡和默认行为。通常在高级组件开发中，.capture也会比较常用。.self则适用于当事件目标本身与父级元素都绑定相同的事件时，只需要处理目标元素的情况。.once和.passive则针对特定场景使用，例如只需要执行单次操作和优化事件处理性能等。
<!-- 阻止事件冒泡 常用-->
<div @click.stop="doSomething"></div>
<!-- 阻止默认行为 常用-->
<a @click.prevent="doSomething" href="#">链接</a>
<!-- 捕获模式添加事件侦听器 -->
<div @click.capture="doSomething"></div>
<!-- 只有当事件是从事件目标本身触发时才触发处理程序 -->
<div @click.self="doSomething"></div>
<!-- 只触发一次 -->
<button @click.once="doSomething">按钮</button>
<!-- 指示事件处理程序不会调用 preventDefault() -->
<a @click.passive="doSomething" href="#">链接</a>
注意：
事件修饰符可以组合使用，如：@click.stop.prevent表示阻止事件冒泡和默认行为。且这种组合是有先后顺序的，@click.prevent.stop该组合也是阻止事件冒泡和默认行为，不过它是先阻止默认行为再阻止冒泡事件
例子：阻止默认行为
<template>
<div>
<a href="https://www.example.com" @click="doSomething">链接</a>
<a href="https://www.example.com" @click.prevent="doSomething">链接</a>
</div>
</template>
<script>
export default {
methods: {
doSomething(event) {
event.preventDefault();
console.log('链接被点击了');
}
}
}
</script>
在代码中，我们添加了一个@click事件处理程序，当链接被点击时会触发它。在处理程序中，使用event.preventDefault()方法阻止了链接默认的跳转行为，然后在控制台打印出了一条消息。
在Vue中，每个标签的默认行为并不是完全不同的。 虽然Vue中的HTML标签依然遵循W3C规范，并且大多数标签的默认行为也与传统Web开发中相同，但是由于Vue引入了一些新的概念和机制，因此也带来了一些新的标签和属性。
下面是一些常见的HTML标签及其默认行为：
<a>标签：用于创建超链接，点击后会跳转到指定的URL地址。<form>标签：用于创建表单，提交表单数据到指定的URL地址。<input>标签：用于输入文本、数字等数据。<select>标签：用于创建下拉列表框，用户可以从中选择一个选项。<textarea>标签：用于输入多行文本。<button>标签：用于创建按钮，可以在点击时触发相关事件。<img>标签：用于显示图片。<ul>和<ol>标签：用于创建无序列表和有序列表。<li>标签：用于创建列表项。<div>标签：用于组织页面结构，没有特定的默认行为。
例子：阻止冒泡事件
<template>
<div @click="handleDivClick">
<button @click.stop="handleButtonClick">点击</button>
</div>
</template>
<script>
export default {
methods: {
handleButtonClick() {
console.log('按钮被点击');
},
handleDivClick() {
console.log('DIV被点击');
},
},
};
</script>
在上面的例子中，当用户点击按钮时，只会触发 handleButtonClick 方法，不会触发 handleDivClick 方法。
事件冒泡是指在DOM结构中，某个元素触发了某个事件，该事件会从当前元素开始向其父级元素进行传递，直到到达文档根节点或被阻止。例如，当用户在一个按钮上点击时，该按钮的点击事件会被传递到其父节点、祖先节点，直到传递到文档根节点或被阻止。
在事件冒泡中，事件从内部元素传递到外部元素，因此事件冒泡称为自下而上的传播。事件在DOM中的传播过程可以被利用来对一组元素进行事件处理，从而避免需要对每个元素添加事件处理程序。
最后，注意：Vue 中的事件修饰符可以同时使用多个。例如，你可以在一个 @click 事件的后面添加 .prevent 和 .stop 修饰符来阻止默认行为并停止事件冒泡：
<button @click.prevent.stop="handleClick">Click me</button>
这里的 .prevent 修饰符阻止了按钮的默认行为，而 .stop 修饰符则停止了事件从按钮向上传播给父元素。
键盘事件
在Vue中，可以使用v-on指令来绑定键盘事件
常用的键盘事件
- @keyup：键盘松开时触发，可在后面加上修饰符来指定触发的键，例如@keyup.enter表示按下回车键时触发。（这里用到了按键别名）
- @keydown：键盘按下时触发，也可以加上修饰符来指定触发的键。
- @keypress：键盘按键被按下并松开时触发，同样可以加上修饰符。
Vue中提供的按键别名如下：
.enter：回车键。.tab：制表键。.delete/.del：删除键。.esc：Esc键。.space：空格键。.up：上箭头键。.down：下箭头键。.left：左箭头键。.right：右箭头键。.ctrl：Ctrl键。.alt：Alt键。.shift：Shift键。.meta：Meta键，对于Windows键盘就是Windows键，而对于苹果键盘就是Command键。
<input v-on:keyup.enter="submitForm">
#简写
<input @keyup.enter="submitForm">
# 我们使用了Vue的.enter按键别名来绑定输入框的keyup事件，这表示用户按下回车键后会触发名为submitForm的事件处理函数。
<input @keyup.enter.y="submitForm">
# 同时按下enter跟y才会触发 名为submitForm的事件处理函数。
例子
<template>
<div>
<input type="text" v-model="text" @keyup.enter.prevent="handleSubmit">
</div>
</template>
<script>
export default {
data() {
return {
text: ''
}
},
methods: {
handleSubmit() {
// 处理表单提交的逻辑
console.log('提交表单：' + this.text)
}
}
}
</script>
在这个例子中，我们给Vue的input元素设置了一个@keyup.enter.prevent事件监听，表示在用户在输入框内按下“回车（Enter）”键时，会执行一个名为handleSubmit的处理函数，同时使用.prevent修饰符阻止默认提交行为。这个处理函数内我们可以添加表单提交逻辑，在控制台输出用户输入的内容。
