一：事件处理
解决点
1.绑定事件
2.事件传参
3.保证事件的event不丢
<template>
<div >
欢迎来到上海
</div>
<button @click="showInfo">点击提示信息</button>
<button @click="showInfo1(66)">点击提示信息</button>
<!-- 传参时会将事件的event弄丢，所以采取如下方法 -->
<button @click="showInfo2(66,$event)">点击提示信息</button>
</template>
<script setup>
const showInfo=()=>{
alert('welcome to shanghai')
}
const showInfo1=(id)=>{
alert('welcome to shanghai')
console.log(id);
}
const showInfo2=(id,e)=>{
alert('welcome to shanghai')
console.log(id,e);
}
</script>
二：事件的修饰符
1.prevent
2.stop
3.once
4.capture
5.self
6.passive
<template>
<div >
欢迎来到上海
</div>
<!-- 阻止默认事件 -->
<a href="http://www.baidu.com" @click.prevent="showInfo">点击跳转</a>
<!-- 阻止事件冒泡,事件冒泡：点击button触发事件之后，会自动触发div上的事件 -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">阻止冒泡</button>
</div>
<!-- 事件只触发一次 -->
<button @click.once="showInfo">组织冒泡</button>
<!-- 事件捕获模式 ，事件的处理是在事件冒泡阶段，而事件捕获（顺序div1->div2）之后，才进行事件冒泡(div2->div1)-->
<!-- 因为先捕获再冒泡，要想在捕获时期处理div1，加上caputer -->
<div class="div1" @click.capture="showInfo1(1)">
div1
<div class="div2" @click="showInfo2(2)">
div2
</div>
</div>
<!-- 只有event.target是当前操作的元素才触发事件 ,其实也可以阻止冒泡-->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">组织冒泡</button>
</div>
<!-- 事件的默认行为立即执行，无需等待事件的回调执行结束 -->
<!-- 如果是鼠标滑轮（wheel）控制，则需要用passive来使得不需要等待回调结束，滚动条才有效果出现， -->
<!-- 如果是scroll拖动滚动条则不需要等事件回调结束才会出现滚动条变化 -->
<!-- 移动端使用passive多一点，pc端很少使用 -->
<ul class="list" @wheel.passive="showcompute">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</template>
<script setup>
const showInfo=()=>{
alert('阻止默认行为=》跳转')
}
const showInfo1=(id)=>{
console.log(id);
}
const showInfo2=(id)=>{
console.log(id);
}
const showcompute=()=>{
for(let i=0;i<10000;i++){
console.log(i);
}
}
</script>
<style>
*{
margin-bottom: 20px;
}
.demo1{
width: 100%;
height: 50px;
background-color: aqua;
}
.list{
width: 100%;
height: 100px;
overflow: auto;
background-color: bisque;
}
.list li{
width: 100%;
height: 50px;
}
</style>
三：键盘按键的修饰符
.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
注意：在 Mac 键盘上，meta 是 Command 键 (⌘)。在 Windows 键盘上，meta 键是 Windows 键 (⊞)。在 Sun 微机系统键盘上，meta 是钻石键 (◆)。在某些键盘上，特别是 MIT 和 Lisp 机器的键盘及其后代版本的键盘，如 Knight 键盘，space-cadet 键盘，meta 都被标记为“META”。在 Symbolics 键盘上，meta 也被标识为“META”或“Meta”。
四：鼠标的修饰符
.left
.right
.middle