当前位置：首页 > news >正文

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

news 来源：原创 2025/7/1 16:37:55

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

一、列表渲染
- - `v-for` 指令
  - `:key` 属性
  - 遍历对象
  - 响应式更新
  - 列表渲染的作用
二、应用示例
- - 项目结构
  - `public/index.html`
  - `src/components/TodoApp.vue`
  - `src/main.js`
  - `package.json`
  - 构建和运行项目

课题摘要:本文介绍了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 指令可以绑定到数组上，并为数组中的每个元素渲染一个元素或模板块。基本语法如下：

<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 不仅可以遍历数组，还可以遍历对象：

<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`

<!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`

<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`

import { createApp } from 'vue';
import TodoApp from './components/TodoApp.vue';createApp(TodoApp).mount('#app');

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

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

青少年编程与数学 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`