青少年编程与数学 02-006 前端开发框架VUE 08课题、列表渲染
课题摘要:本文介绍了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 创建项目：
bashvue create todo-app -
进入项目目录：
bashcd todo-app -
替换
src/components/TodoApp.vue和src/main.js中的内容为上述代码。 -
运行项目：
bashnpm run serve打开浏览器访问
http://localhost:8080即可看到待办事项应用。
这个示例展示了如何使用 Vue 3 的组合式 API 和列表渲染来构建一个简单的待办事项应用。用户可以在输入框中输入新的待办事项，并按下 Enter 键添加到列表中。同时，可以点击每个待办事项旁边的按钮来删除对应的待办事项。