一、什么是事件对象1.2 演示事件对象在控制台输出 单击事件 的两种方法。template !-- 两个作用函数完全一样接收事件对象 → 打印到控制台 -- !-- 按钮1点击触发 greet 方法 -- button clickgreetGreet/button !-- 按钮2点击触发 change 方法并手动传事件 $event -- button clickchange($event)change/button !-- 区别在这里最重要 clickgreet → 不传参Vue 会自动把事件对象传给函数 $event是Vue提供的内置变量使用它可以获取事件对象 clickchange($event) → 手动传事件对象 -- /template script setup const greet event console.log(event) const change event console.log(event) /script1.3演示事件对象的使用方法template divcount的值为{{ count }}/div button clickaddCountcount1/button /template script setup import { ref } from vue const count ref(1) const addCount event { count.value if (count.value % 2 0) { event.target.style.border 3px dotted } else { event.target.style.border 3px solid } } /script1.4 演示通过$event获取事件对象的方式template divcount的值为{{ count }}/div button clickaddCountcount1/button button clickaddCountN(3, $event)countn/button /template script setup import { ref } from vue const count ref(1) const addCount event { count.value if (count.value % 2 0) { event.target.style.border 3px dotted } else { event.target.style.border 3px solid } } const addCountN (n, event) { count.value n if (count.value % 2 0) { event.target.style.border 3px dotted } else { event.target.style.border 3px solid } } /script二、事件修饰符2.1 什么是事件修饰符2.2 阻止默认事件行为通过.stop事件修饰符可以实现阻止事件冒泡的功能示例代码如下。!-- 2. 事件冒泡是什么 DOM 事件默认会从子元素向上传递到父元素。 点击第一个按钮 执行子元素点击 自动执行父元素点击 -- template !-- 父元素点击事件 -- div v-on:clickshow(我是父元素的事件) !-- 正常冒泡点击会触发 子 → 父 -- button v-on:clickshow(我是子元素的事件)事件冒泡/button !-- 阻止冒泡只触发 子不触发父 -- button v-on:click.stopshow(我是子元素的事件111)阻止事件冒泡/button /div /template script setup let show message console.log(message) /script2.3 事件捕获通过.capture事件修饰符可以实现事件捕获的功能示例代码如下。!-- 一、什么是 .capture事件捕获 DOM 事件有两个阶段 捕获阶段从上往下父 → 子 冒泡阶段从下往上子 → 父 默认 click 冒泡模式子先触发父后触发 click.capture 捕获模式父先触发子后触发 -- template div v-on:click.captureshow(我是父元素的事件) button v-on:clickshow(我是子元素的事件)事件捕获/button /div /template script setup let show message console.log(message) /script2.4 使事件只触发一次通过.once事件修饰符可以实现使事件只触发一次的功能。.once事件修饰符用于阻止事件的多次触发让事件只触发一次示例代码如下。template button v-on:click.once show(我是当前元素的单击事件且只执行一次)只执行一次/button button click.once show(我是当前元素的单击事件且只执行一次)只执行一次11/button /template script setup let show message console.log(message) /script2.5 捕获特定按键接下来以捕获Enter键为例演示.enter事件修饰符的使用示例代码如下。template input typetext v-on:keyup.entersubmit /template script setup let submit () console.log(捕获到Enter键) /script三计算属性3.1 什么是计算属性默 认事件行 111为3.2 演示计算属性!-- 超级总结 ref创建响应式变量 computed根据其他响应式数据自动计算出新值 依赖数据变化 → 计算属性自动更新 带 ref 的变量必须用 .value 访问 / 修改 你的代码没有任何问题是学习 Vue 计算属性非常标准、优秀的示例 -- template div stylemargin: 20px; p初始 message{{ message }}/p p反转之后的 message{{ reversedMessage }}/p button clickupdateMessage stylepadding: 12px 12px;更改/button /div /template script setup import { ref, computed } from vue // 响应式数据 const message ref(Hello World) // 计算属性自动依赖 message变化时重新计算 const reversedMessage computed(() { return message.value.split().reverse().join() }) // 点击修改数据 const updateMessage () { message.value hello } /script单击“更改”按钮后的页面效果如下图所示。3.3 计算属性的趣味案例template div stylemax-width: 500px; margin: 30px auto; padding: 20px; border: 1px solid #eee; border-radius: 12px; h2 styletext-align: center; color: #42b983;‍ 姓名趣味计算器/h2 div stylemargin: 16px 0; label请输入你的名字/label input typetext v-modeluserName placeholder比如张三 stylewidth: 100%; padding: 8px; margin-top: 6px; border: 1px solid #ccc; border-radius: 6px; /div div stylebackground: #f9f9f9; padding: 14px; border-radius: 8px; margin-top: 16px; p 你输入的名字{{ userName }}/p p 名字长度{{ nameLength }}/p p 名字首字母{{ firstLetter }}/p p 名字倒过来{{ reversedName }}/p p⭐ 你的专属称号{{ coolNickname }}/p /div /div /template script setup import { ref, computed } from vue // 响应式数据用户输入的名字 const userName ref() // 1. 名字长度 const nameLength computed(() { return userName.value.length 个字 }) /script四、前置知识点补充4.1 什么是函数以及参数讲解函数的参数是什么参数 传给函数的数据可以传字符串、数字、变量、对象、事件对象……函数内部可以直接使用这些参数4.2 案例演示单个参数演示template div !-- 输入框绑定名字 -- input v-modeluserName placeholder输入名字 / !-- 点击调用函数并传参 -- button clicksayHello(userName)打招呼/button /div /template script setup import { ref } from vue // 定义响应式变量 const userName ref() // 定义函数接收一个参数 name function sayHello(name) { alert(你好 name) } /script多个参数演示template button clickadd(2, 3)计算 23/button /template script setup const add (a, b) { console.log(a b) // 输出 5 } /script