VUE.JS实践--事件对象和计算属性

一、什么是事件对象

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>