1.事件的基本使用

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

<template><p>count的值为:{{count}}</p><button v-on:click="addCount">count++</button><button @click="count++">行内式的写法,点击按钮count++</button>
</tempalte><script setup>
import {ref,reactive} from "vue"const count=ref(0);
const addCount=()=>{count.value++;
}
</script>

2.事件对象

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法

<template><div class="box" @contextmenu="sum($event,100,200)"><p>需求:右击当前盒子时计算传入数据的和,并阻止右击时弹出弹框的默认事件</p></div><!-- 事件处理程序中可以有多个方法，这些方法由逗号运算符分隔 --><p><button @click="one($event),two($event)">传入多个方法</button> </p>
</tempalte><script setup>
import {ref,reactive} from "vue"const sum=(e,a,b)=>{e.preventDefault();console.log(111)console.log(a+b);
}
const one=(e)=>{console.log(e);console.log("获取当前点击的位置:",e.clientX,e.clientY);
}
const two=(e)=>{console.log("我是第二个方法")
}
</script>

3.事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

Vue中的事件修饰符：

 1.prevent：阻止默认事件（常用）；2.stop：阻止事件冒泡（常用）；3.once：事件只触发一次（常用）；4.capture：使用事件的捕获模式；5.self：只有event.target是当前操作的元素时才触发事件；6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<template><div><p>1.阻止默认事件</p><a href="http://www.baiduc.com" @click.prevent="skip">百度一下,你就知道</a>
</div><div class="demo1" @click="showFather"><p>2.阻止冒泡</p><div class="demo2" @click.stop="showSon"></div></div><p> 3.once事件只触发一次 <button @click="once">点击</button> </p><div class="demo1" @click.capture="showFather"><p>4.capture使用事件的捕获模式</p><div class="demo2" @click="showSon"></div></div><div class="demo1" @click.self="showFather"><p>4.self只有event.target是当前操作的元素时才触发事件</p><div class="demo2" @click="showSon"></div></div><div><p>5.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；</p><!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； --><ul @scroll.passive="demo" class="oul"><li>这是第1个li</li><li>这是第2个li</li><li>这是第3个li</li><li>这是第4个li</li><li>这是第5个li</li></ul></div>
</tempalte><script setup>
import {ref,reactive} from "vue"const skip=()=>{
console.log("阻止跳转!");
}
const showFather=()=>{console.log("showFather事件");
}
const showSon=()=>{console.log("showSon事件");
}
const once=function(){console.log("只触发一次的事件");
}
// @wheel滚轮滚动事件 @scroll滚动条滚动事件
const demo=function(){for(let i=0;i<100000;i++){console.log("这是第"+i+"个");}console.log("111");
}
</script>

4.按键修饰符

在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许为 v-on 或者 @ 在监听键盘事件时添加按键修饰符：

1.Vue中常用的按键别名：

 回车 => enter删除 => delete  (捕获“删除”和“退格”键)退出 => esc空格 => space换行 => tab (特殊，必须配合keydown去使用)上 => up下 => down左 => left右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：tab、ctrl、alt、shift、meta

实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

 (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。(2).配合keydown使用：正常触发事件。

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

4.也可以使用keyCode去指定具体的按键（vue2有vue3已经舍去）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

6. exact 修饰符:

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<tempalte>
<p><input type="text" @keydown.huiche="search" v-model="searchVal"  /> 
</p><p><!-- 同时按下ctrl+c 起作用--><input type="text" placeholder="按下回车提示输入" @keyup.ctrl.c="showInfo($event)"> 
</p><!-- 有且只有 Ctrl 被按下的时候才触发 -->
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onClick">A</button><!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button></template><script setup>
const searchVal=ref("");
//按下enter键,搜索
const search=function(){window.open(`https://www.baidu.com/s?wd=${searchVal.value}`,"_blank");
}
const showInfo=function(e){console.log(e.keyCode);
}
const onClick=function(){console.log("只按下ctrl")
}</script>