大家好，我是程序员小羊！
前言：
为帮助大家更好地掌握Vue.js项目的开发流程，我将为你讲解一个完整的Vue.js实战案例，并提供详细的源码解析。这个案例将涵盖从项目创建到实现各种功能模块的全过程，适合用于构建一个具有基本CRUD功能的简单任务管理应用。
案例介绍
我们将开发一个任务管理应用（Task Manager），它允许用户添加、查看、编辑和删除任务。这个应用将包括以下主要功能模块：
- 任务列表显示：展示所有任务的列表。
- 添加任务：允许用户添加新的任务。
- 编辑任务：支持用户编辑现有任务。
- 删除任务：允许用户删除任务。
一、项目初始化
1. 创建Vue项目
首先，我们使用Vue CLI来创建一个新的Vue项目。确保你已经安装了Vue CLI，如果没有，可以通过以下命令安装：
npm install -g @vue/cli
然后使用以下命令创建一个新的Vue项目：
vue create task-manager
根据提示选择默认的Vue 3配置。
2. 目录结构说明
项目创建后，目录结构如下：
task-manager/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ ├── views/
│ ├── App.vue
│ ├── main.js
├── package.json
└── README.md
public/：存放静态资源。src/：主要代码目录，包括组件、页面视图、全局样式等。App.vue：根组件。main.js：入口文件，初始化Vue实例。
二、实现任务管理功能
1. 任务列表显示
我们首先在 src/components/ 目录下创建一个 TaskList.vue 组件，用于显示任务列表。
<template>
<div class="task-list">
<h2>Task List</h2>
<ul>
<li v-for="task in tasks" :key="task.id">
{{ task.name }}
<button @click="editTask(task)">Edit</button>
<button @click="deleteTask(task.id)">Delete</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'TaskList',
props: {
tasks: Array
},
methods: {
editTask(task) {
this.$emit('edit-task', task);
},
deleteTask(id) {
this.$emit('delete-task', id);
}
}
}
</script>
<style scoped>
.task-list {
margin: 20px;
}
</style>
- 模板部分：通过
v-for指令循环显示任务列表，并为每个任务提供编辑和删除按钮。 - 脚本部分：通过
props接收父组件传递的tasks数据，使用emit触发事件，将编辑和删除操作反馈给父组件。
2. 添加任务
在 src/components/ 目录下创建一个 AddTask.vue 组件，用于添加新的任务。
<template>
<div class="add-task">
<h2>Add Task</h2>
<input v-model="taskName" placeholder="Enter task name" />
<button @click="addTask">Add</button>
</div>
</template>
<script>
export default {
name: 'AddTask',
data() {
return {
taskName: ''
};
},
methods: {
addTask() {
if (this.taskName.trim()) {
this.$emit('add-task', this.taskName);
this.taskName = '';
}
}
}
}
</script>
<style scoped>
.add-task {
margin: 20px;
}
</style>
- 模板部分：包含一个输入框和添加按钮。
v-model实现双向数据绑定，实时更新taskName。 - 脚本部分：
addTask方法会在点击按钮时被触发，并通过emit事件将任务名称传递给父组件。
3. 编辑任务
编辑任务的功能可以复用 AddTask.vue 组件，我们只需在父组件中处理传递的任务数据。
4. 删除任务
删除任务的功能已在 TaskList.vue 中通过 deleteTask 方法实现，它会调用 emit 事件将任务ID传递给父组件。
三、App.vue 组合各组件
在 App.vue 中，我们将 TaskList 和 AddTask 组件组合起来，并管理任务的添加、编辑和删除操作。
<template>
<div id="app">
<h1>Task Manager</h1>
<AddTask @add-task="handleAddTask" />
<TaskList
:tasks="tasks"
@edit-task="handleEditTask"
@delete-task="handleDeleteTask"
/>
</div>
</template>
<script>
import AddTask from './components/AddTask.vue';
import TaskList from './components/TaskList.vue';
export default {
name: 'App',
components: {
AddTask,
TaskList
},
data() {
return {
tasks: [],
currentTask: null
};
},
methods: {
handleAddTask(taskName) {
if (this.currentTask) {
// 编辑任务
this.currentTask.name = taskName;
this.currentTask = null;
} else {
// 添加新任务
this.tasks.push({
id: Date.now(),
name: taskName
});
}
},
handleEditTask(task) {
this.currentTask = task;
},
handleDeleteTask(id) {
this.tasks = this.tasks.filter(task => task.id !== id);
}
}
}
</script>
<style>
#app {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
</style>
- 模板部分：渲染
AddTask和TaskList组件，并将必要的数据和方法通过props和events传递。 - 脚本部分：使用
data定义任务列表tasks和当前编辑的任务currentTask。在方法中处理任务的增删改逻辑。handleAddTask负责处理任务的添加和编辑操作。handleEditTask设置当前任务为选中的任务，以便在输入框中显示任务名称进行编辑。handleDeleteTask根据任务ID删除任务。
四、运行项目
最后，运行项目并在浏览器中查看效果：
npm run serve
打开浏览器，访问 http://localhost:8080，你将看到任务管理应用的界面，可以添加、编辑和删除任务。
结语
通过这个Vue.js项目实战案例，我们学习了如何创建组件、管理状态和处理事件。这个案例覆盖了Vue.js中的一些核心概念，如组件通信、事件处理、条件渲染和列表渲染。希望这个详细的源码讲解对你有所帮助，为你今后的Vue.js开发提供参考。如果你有任何问题或想深入了解某个部分，随时告诉我！
结尾
今天这篇文章就到这里了，大厦之成，非一木之材也；大海之阔，非一流之归也。感谢大家观看本文
