青少年编程与数学 02-006 前端开发框架VUE 08课题、列表渲染

一、列表渲染
- - [`v-for` 指令](#v-for 指令)
  - [`:key` 属性](#:key 属性)
  - 遍历对象
  - 响应式更新
  - 列表渲染的作用
二、应用示例

课题摘要:本文介绍了Vue.js中的列表渲染功能，它允许基于数组渲染元素列表，并在数组变化时更新列表。核心是v-for指令，它绑定到数组上，为每个元素渲染一个元素或模板块。使用v-for时，应为每个列表项提供唯一的:key属性，帮助Vue跟踪节点身份，优化DOM更新。v-for也能遍历对象。列表渲染对于动态调整UI、提升性能和响应式设计至关重要。文章提供了一个待办事项应用示例，展示了如何使用Vue 3的组合式API和列表渲染构建应用，包括项目结构、组件代码和运行指南。这个示例允许用户添加和删除待办事项，展示了Vue列表渲染的实际应用。

一、列表渲染

列表渲染是 Vue.js 中的一个核心功能，它允许你基于一个数组来渲染一个元素列表，并在数组发生变化时更新列表。Vue 提供了 v-for 指令来实现列表渲染，使得处理列表数据变得简单和高效。

`v-for` 指令

v-for 指令可以绑定到数组上，并为数组中的每个元素渲染一个元素或模板块。基本语法如下：

vue 复制代码

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Orange' },
]);
</script>

在这个示例中，v-for="item in items" 告诉 Vue 为 items 数组中的每个元素渲染一个 <li> 元素。

`:key` 属性

在使用 v-for 时，建议为每个列表项提供一个唯一的 :key 属性值。key 是一个特殊的属性，用于跟踪每个节点的身份，从而帮助 Vue 确定哪些元素是不同的，哪些元素是相同的，以及哪些元素改变了位置。这有助于 Vue 优化 DOM 更新过程。

遍历对象

v-for 不仅可以遍历数组，还可以遍历对象：

vue 复制代码

<template>
  <ul>
    <li v-for="(value, key, index) in object" :key="key">
      {{ index }}. {{ key }}: {{ value }}
    </li>
  </ul>
</template>

<script setup>
import { reactive } from 'vue';

const object = reactive({
  name: 'Vue',
  framework: 'JavaScript',
  year: 2014
});
</script>

响应式更新

当原始数组中的数据被修改时，例如添加、删除或排序元素，Vue 会自动更新 DOM 来反映这些变化。Vue 内部使用高效的算法来最小化 DOM 更新，以保持应用性能。

列表渲染的作用

列表渲染在构建现代 Web 应用中非常重要，因为它允许应用动态地根据数据和用户交互来调整 UI。这种方式可以：

提供更丰富的用户体验。
减少不必要的 DOM 操作，提高性能。
根据应用的状态显示或隐藏特定的功能和组件。

列表渲染是响应式编程和声明式 UI 框架的一个核心概念，Vue 提供的 v-for 指令使得在模板中实现列表渲染变得简单而直观。

二、应用示例

下面是一个使用 Vue 3 组合式 API 和列表渲染的完整项目示例。这个示例是一个简单的待办事项（Todo）应用，它允许用户添加新的待办事项，并展示一个待办事项列表。

项目结构

复制代码

todo-app/
│
├── public/
│   └── index.html
│
├── src/
│   ├── assets/
│   │   └── logo.png
│   │
│   ├── components/
│   │   └── TodoApp.vue
│   │
│   └── main.js
│
└── package.json

`public/index.html`

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Todo App</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

`src/components/TodoApp.vue`

vue 复制代码

<template>
  <div class="todo-app">
    <h1>Todo App</h1>
    <input type="text" v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" />
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="removeTodo(todo.id)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const newTodo = ref('');
const todos = ref([
  { id: 1, text: 'Learn Vue' },
  { id: 2, text: 'Build something' },
]);

function addTodo() {
  if (newTodo.value.trim()) {
    todos.value.push({ id: todos.value.length + 1, text: newTodo.value });
    newTodo.value = '';
  }
}

function removeTodo(id) {
  todos.value = todos.value.filter(todo => todo.id !== id);
}
</script>

<style scoped>
.todo-app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

input[type="text"] {
  padding: 10px;
  margin-bottom: 20px;
  width: 100%;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
}
</style>

`src/main.js`

javascript 复制代码

import { createApp } from 'vue';
import TodoApp from './components/TodoApp.vue';

createApp(TodoApp).mount('#app');

`package.json`

json 复制代码

{
  "name": "todo-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-service": "^4.0.0"
  }
}

构建和运行项目

使用 Vue CLI 创建项目：
bash 复制代码
```
vue create todo-app
```
进入项目目录：
bash 复制代码
```
cd todo-app
```
替换 src/components/TodoApp.vue 和 src/main.js 中的内容为上述代码。
运行项目：
bash 复制代码
```
npm run serve
```
打开浏览器访问 http://localhost:8080 即可看到待办事项应用。

这个示例展示了如何使用 Vue 3 的组合式 API 和列表渲染来构建一个简单的待办事项应用。用户可以在输入框中输入新的待办事项，并按下 Enter 键添加到列表中。同时，可以点击每个待办事项旁边的按钮来删除对应的待办事项。

青少年编程与数学 02-006 前端开发框架VUE 08课题、列表渲染

青少年编程与数学 02-006 前端开发框架VUE 08课题、列表渲染

一、列表渲染

v-for 指令

:key 属性

遍历对象

响应式更新

列表渲染的作用

二、应用示例

项目结构

public/index.html

src/components/TodoApp.vue

src/main.js

package.json

构建和运行项目

`v-for` 指令

`:key` 属性

`public/index.html`

`src/components/TodoApp.vue`

`src/main.js`

`package.json`