Vue 3 事件处理与列表渲染---02

V U E

一、列表渲染（v-for）

1.1 基础语法

v-for指令用于基于数组或对象的数据重复渲染元素。

语法格式

数组：v-for="item in items" 或 v-for="(item, index) in items"
对象：v-for="value in object" 或 v-for="(value, key) in object"

1.2 数组渲染详解

复制代码

<script setup lang="ts">
const array = ["Tom", "jerry", '张三', 'Liu']
</script>

<template>
  <!-- 1. 基础用法：遍历数组元素 -->
  <ul>
    <li v-for="item in array">{{ item }}</li>
  </ul>
  <!-- 输出: Tom, jerry, 张三, Liu -->
  
  <!-- 2. 获取索引：遍历元素和索引 -->
  <ul>
    <li v-for="(item, index) in array">{{ index }}.{{ item }}</li>
  </ul>
  <!-- 输出: 0.Tom, 1.jerry, 2.张三, 3.Liu -->
</template>

语法解析：

item：当前遍历的数组元素
index：当前元素的索引（从0开始）
array：要遍历的数组

1.3 对象渲染详解

复制代码

<script setup lang="ts">
const obj = {
  name: '张三',
  age: 18,
  addr: '湖南'
}
</script>

<template>
  <!-- 1. 只获取值 -->
  <ul>
    <li v-for="item in obj">{{ item }}</li>
  </ul>
  <!-- 输出: 张三, 18, 湖南 -->
  
  <!-- 2. 获取值和键 -->
  <ul>
    <li v-for="(value, key) in obj">{{ key }}:{{ value }}</li>
  </ul>
  <!-- 输出: name:张三, age:18, addr:湖南 -->
  
  <!-- 3. 获取值、键和索引 -->
  <ul>
    <li v-for="(value, key, index) in obj">{{ index }}.{{ key }}:{{ value }}</li>
  </ul>
  <!-- 输出: 0.name:张三, 1.age:18, 2.addr:湖南 -->
</template>

语法解析：

value：对象的值
key：对象的键名
index：键值对的索引

二、事件绑定

2.1 基础语法

Vue 使用**@** 或 v-on: 来绑定事件。

语法格式

完整写法：v-on:eventName="handler"
简写写法：@eventName="handler"

2.2 事件处理函数

复制代码

<script setup lang="ts">
// 基础事件处理函数
function handleClick(e: Event) {
  console.log('按钮被点击了', e)
}

// 带参数的事件处理函数
function click_01(name: string, e: Event) {
  console.log('点击事件', name, e)
}
</script>

<template>
  <!-- 1. 完整语法 -->
  <button v-on:click="handleClick">按钮</button>
  
  <!-- 2. 简写语法 -->
  <button @click="handleClick">按钮</button>
  
  <!-- 3. 传参和事件对象 -->
  <button @click="click_01('Liu', $event)">按钮</button>
</template>

语法解析

$event:特殊变量，代表原生 DOM 事件对象
click_01('Liu', $event):传递自定义参数和事件对象

2.3 不同类型事件

复制代码

<template>
  <!-- 鼠标事件 -->
  <button @dblclick="click_03('双击事件')">双击事件</button>  <!-- 双击 -->
  <button @click.right="click_03('右键事件')">右键事件</button>  <!-- 右键点击 -->
  <button @click.middle="click_03('中键事件')">中键事件</button>  <!-- 中键点击 -->
  
  <!-- 键盘事件 -->
  <input @keydown.enter="enterHandeler" placeholder="按Enter键">
  <input @input="inputHandeler" placeholder="输入内容">
  
  <!-- 表单事件 -->
  <input @focus="focusHandeler" placeholder="获得焦点">
  <input @blur="blurHandeler" placeholder="失去焦点">
</template>

2.4 事件处理函数类型

复制代码

// 键盘事件处理
function enterHandeler(e: KeyboardEvent) {
  const target = e.target as HTMLInputElement  // 类型断言
  const value = target.value
  console.log('enter键被按下', value)
}

// 输入事件处理
function inputHandeler(e: InputEvent) {
  console.log('键盘输入中...', e.data)  // e.data 包含输入的数据
}

// 焦点事件处理
function focusHandeler() {
  console.log('触发焦点了')
}

function blurHandeler() {
  console.log('失去焦点了')
}

2.5主要事件类型

三、事件修饰符

3.1 什么是事件修饰符

事件修饰符是以点开头的特殊后缀，用于指示 Vue 以特殊方式处理事件。

3.2 常用事件修饰符

复制代码

<template>
  <!-- 1. .prevent - 阻止默认行为 -->
  <a href="https://www.fengfengzhidao.com" @click.prevent="handleClick">
    跳转网站
  </a>
  <!-- 点击后不会跳转，但会执行 handleClick -->
  
  <!-- 2. .once - 只触发一次 -->
  <button @click.once="handleClick">只触发一次</button>
  <!-- 点击一次后，事件监听器会被移除 -->
  
  <!-- 3. .stop - 阻止事件冒泡 -->
  <div class="A" @click="handler($event, 'A')">
    A
    <div class="B" @click.stop="handler($event, 'B')">
      B
      <button @click="handler($event, '按钮')">点我</button>
    </div>
  </div>
  <!-- 点击B或按钮时，不会冒泡到A -->
</template>

3.3 事件冒泡详解

事件冒泡概念

当内部元素被点击时，事件会向上传递给父级元素。

复制代码

<template>
  <div class="A" @click="handler($event, 'A')">
    A
    <div class="B" @click="handler($event, 'B')">
      B
      <button @click="handler($event, '按钮')">点我</button>
    </div>
  </div>
</template>

<script setup lang="ts">
function handler(e: Event, name: string) {
  console.log(e.target, name)
}
</script>

点击按钮时的事件传播顺序：

按钮被点击
B 元素收到点击事件
A 元素收到点击事件

阻止事件冒泡

复制代码

<template>
  <div class="A" @click="handler($event, 'A')">
    A
    <div class="B" @click.stop="handler($event, 'B')">
      B
      <button @click="handler($event, '按钮')">点我</button>
    </div>
  </div>
</template>

3.4 .self 修饰符

.self修饰符确保事件只在元素本身触发，不响应子元素的事件。

复制代码

<template>
  <div class="A" @click="handler($event, 'A')">
    A
    <div class="B" @click.stop.self="handler($event, 'B')">
      B
      <button @click="handler($event, '按钮')">点我</button>
    </div>
  </div>
</template>

.self的作用

只有点击 B 元素本身时才会触发
点击按钮时不会触发 B 的事件（因为事件来自子元素）

3.5 修饰符连用

修饰符可以连用，执行顺序从左到右：

复制代码

<!-- 同时阻止冒泡和默认行为 -->
<button @click.stop.prevent="handleClick">阻止冒泡和默认行为</button>

<!-- 阻止冒泡且只执行一次 -->
<button @click.stop.once="handleClick">阻止冒泡且只执行一次</button>

| 语法 | 用途 | 示例 |
| v-for="item in array" | 遍历数组 | <li v-for="item in array">{{ item }}</li> |
| v-for="(value, key) in obj" | 遍历对象 | <li v-for="(value, key) in obj">{{ key }}:{{ value }}</li> |
| @click="handler" | 事件绑定 | <button @click="handleClick">按钮</button> |
| @click.prevent | 阻止默认行为 | <a @click.prevent="handleClick">链接</a> |
| @click.stop | 阻止事件冒泡 | <div @click.stop="handler">内容</div> |
| $event | 事件对象 | |------------------------------------------------| | `$