一、什么是事件对象
1.2 演示事件对象，在控制台输出 单击事件 的两种方法。
<template> <!-- 两个作用函数完全一样：接收事件对象 → 打印到控制台 --> <!-- 按钮1：点击触发 greet 方法 --> <button @click="greet">Greet</button> <!-- 按钮2：点击触发 change 方法，并手动传事件 $event --> <button @click="change($event)">change</button> <!-- 区别在这里（最重要） @click="greet" → 不传参，Vue 会自动把事件对象传给函数 $event是Vue提供的内置变量，使用它可以获取事件对象， @click="change($event)" → 手动传事件对象 --> </template> <script setup> const greet = event => console.log(event) const change = event => console.log(event) </script>1.3演示事件对象的使用方法
<template> <div>count的值为：{{ count }}</div> <button @click="addCount">count+1</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' } } </script>1.4 演示通过$event获取事件对象的方式
<template> <div>count的值为：{{ count }}</div> <button @click="addCount">count+1</button> <button @click="addCountN(3, $event)">count+n</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:click="show('我是父元素的事件')"> <!-- 正常冒泡：点击会触发 子 → 父 --> <button v-on:click="show('我是子元素的事件')">事件冒泡</button> <!-- 阻止冒泡：只触发 子，不触发父 --> <button v-on:click.stop="show('我是子元素的事件111')">阻止事件冒泡</button> </div> </template> <script setup> let show = message => console.log(message) </script>2.3 事件捕获
通过.capture事件修饰符可以实现事件捕获的功能，示例代码如下。
<!-- 一、什么是 .capture（事件捕获） DOM 事件有两个阶段： 捕获阶段（从上往下）：父 → 子 冒泡阶段（从下往上）：子 → 父 默认 @click = 冒泡模式（子先触发，父后触发） @click.capture = 捕获模式（父先触发，子后触发） --> <template> <div v-on:click.capture="show('我是父元素的事件')"> <button v-on:click="show('我是子元素的事件')">事件捕获</button> </div> </template> <script setup> let show = message => console.log(message) </script>2.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) </script>2.5 捕获特定按键
接下来以捕获Enter键为例，演示.enter事件修饰符的使用，示例代码如下。
<template> <input type="text" v-on:keyup.enter="submit"> </template> <script setup> let submit = () => console.log('捕获到Enter键') </script>三：计算属性
3.1 什么是计算属性
默 认事件行 111为
3.2 演示计算属性
<!-- 超级总结 ref：创建响应式变量 computed：根据其他响应式数据自动计算出新值 依赖数据变化 → 计算属性自动更新 带 ref 的变量必须用 .value 访问 / 修改 你的代码没有任何问题，是学习 Vue 计算属性非常标准、优秀的示例 --> <template> <div style="margin: 20px;"> <p>初始 message：{{ message }}</p> <p>反转之后的 message：{{ reversedMessage }}</p> <button @click="updateMessage" style="padding: 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 style="max-width: 500px; margin: 30px auto; padding: 20px; border: 1px solid #eee; border-radius: 12px;"> <h2 style="text-align: center; color: #42b983;">🧑🎓 姓名趣味计算器</h2> <div style="margin: 16px 0;"> <label>请输入你的名字：</label> <input type="text" v-model="userName" placeholder="比如：张三" style="width: 100%; padding: 8px; margin-top: 6px; border: 1px solid #ccc; border-radius: 6px;" > </div> <div style="background: #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-model="userName" placeholder="输入名字" /> <!-- 点击调用函数，并传参 --> <button @click="sayHello(userName)">打招呼</button> </div> </template> <script setup> import { ref } from 'vue' // 定义响应式变量 const userName = ref('') // 定义函数：接收一个参数 name function sayHello(name) { alert('你好，' + name) } </script>多个参数演示
<template> <button @click="add(2, 3)">计算 2+3</button> </template> <script setup> const add = (a, b) => { console.log(a + b) // 输出 5 } </script>
