前言
Vue.js 是一个渐进式 JavaScript 框架，旨在构建用户界面。它简洁易用，支持组件化开发，非常适合中小型项目和单页面应用。本文将通过构建一个待办事项应用，展示如何使用 Vue.js 开发前端项目。我们会一步步讲解项目的核心功能，并最终将项目部署上线。
项目背景
待办事项应用是前端开发中常见的练习项目，旨在帮助用户记录和管理日常任务。本项目将实现如下功能：
- 添加待办事项
- 标记任务为完成
- 删除任务
- 基于本地存储保存任务状态
通过这些功能，初学者可以快速掌握 Vue.js 的基本用法以及如何与浏览器的本地存储交互。
技术选型
- Vue.js 3：用于构建用户界面，使用组合式 API（Composition API）进行组件开发。
- Vue CLI：用于快速创建 Vue 项目，并进行本地开发与调试。
- LocalStorage：用于持久化存储任务，避免页面刷新后数据丢失。
项目结构
vue-todo-app
│
├── public/ # 公共静态资源
├── src/ # 源代码目录
│ ├── components/ # Vue 组件
│ ├── App.vue # 主应用组件
│ ├── main.js # 入口文件
│
└── package.json # 项目信息
搭建项目
首先，我们使用 Vue CLI 创建一个新的 Vue 项目：
vue create vue-todo-app
选择默认的 Vue 3 模板，然后进入项目目录并启动开发服务器：
cd vue-todo-app
npm run serve
这将启动本地开发服务器，并在浏览器中打开 localhost:8080，你将看到一个基本的 Vue 项目框架。
核心代码
任务列表组件
我们首先创建一个 TodoList 组件，用于展示待办事项列表。该组件负责显示任务，并允许用户标记任务为完成或删除任务。
<!-- src/components/TodoList.vue -->
<template>
<div class="todo-list">
<h2>My To-Do List</h2>
<ul>
<li v-for="(todo, index) in todos" :key="index">
<span :class="{ completed: todo.completed }">{{ todo.text }}</span>
<button @click="toggleComplete(index)">✔</button>
<button @click="removeTask(index)">✖</button>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
todos: Array
},
methods: {
toggleComplete(index) {
this.$emit('toggle-complete', index);
},
removeTask(index) {
this.$emit('remove-task', index);
}
}
};
</script>
<style scoped>
.completed {
text-decoration: line-through;
}
</style>
添加任务组件
接下来，我们创建一个 AddTask 组件，用户可以通过该组件添加新的待办事项。
<!-- src/components/AddTask.vue -->
<template>
<div class="add-task">
<input v-model="newTask" @keyup.enter="addTask" placeholder="What do you need to do?" />
<button @click="addTask">Add</button>
</div>
</template>
<script>
export default {
data() {
return {
newTask: ''
};
},
methods: {
addTask() {
if (this.newTask.trim()) {
this.$emit('add-task', this.newTask);
this.newTask = '';
}
}
}
};
</script>
<style scoped>
.add-task {
margin-bottom: 20px;
}
</style>
组合组件与逻辑
在 App.vue 中，我们将 TodoList 和 AddTask 组件组合在一起，并实现添加任务、标记任务完成和删除任务的逻辑。同时，我们使用 LocalStorage 来存储任务列表。
<!-- src/App.vue -->
<template>
<div id="app">
<h1>Vue To-Do List</h1>
<AddTask @add-task="addTask" />
<TodoList :todos="todos" @toggle-complete="toggleComplete" @remove-task="removeTask" />
</div>
</template>
<script>
import AddTask from './components/AddTask.vue';
import TodoList from './components/TodoList.vue';
export default {
components: {
AddTask,
TodoList
},
data() {
return {
todos: []
};
},
methods: {
addTask(task) {
this.todos.push({ text: task, completed: false });
this.saveTodos();
},
toggleComplete(index) {
this.todos[index].completed = !this.todos[index].completed;
this.saveTodos();
},
removeTask(index) {
this.todos.splice(index, 1);
this.saveTodos();
},
saveTodos() {
localStorage.setItem('todos', JSON.stringify(this.todos));
},
loadTodos() {
const savedTodos = localStorage.getItem('todos');
if (savedTodos) {
this.todos = JSON.parse(savedTodos);
}
}
},
mounted() {
this.loadTodos();
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
margin-top: 60px;
}
</style>
说明
App.vue是主应用组件，负责将所有逻辑和组件结合在一起。AddTask组件用于添加新任务，当用户点击按钮或按下回车时，新的任务将通过事件传递给父组件App.vue。TodoList组件负责显示任务列表，并且可以通过事件触发标记任务完成或删除任务。
本地存储功能
通过 LocalStorage 我们可以将任务持久化保存。当用户刷新页面时，任务不会丢失。
saveTodos() {
localStorage.setItem('todos', JSON.stringify(this.todos));
},
loadTodos() {
const savedTodos = localStorage.getItem('todos');
if (savedTodos) {
this.todos = JSON.parse(savedTodos);
}
}
saveTodos 方法在任务列表发生变化时被调用，将当前任务列表保存到 LocalStorage 中。loadTodos 方法则在应用加载时读取并恢复任务列表。
部署上线
开发完成后，我们可以通过 Vue CLI 将项目打包并部署到静态服务器上。
首先，运行以下命令打包项目：
npm run build
这将在 dist/ 目录中生成优化后的静态文件。接下来，可以将这些文件上传到 GitHub Pages、Netlify 或 Vercel 等平台进行托管。
项目总结
通过这个项目，我们实现了一个功能简单但实用的待办事项应用。项目中展示了 Vue.js 的核心概念，如组件化开发、数据绑定和事件处理。同时，通过使用本地存储，我们实现了任务的持久化，增强了用户体验。这个项目可以进一步扩展，例如添加任务分类、设置优先级、任务搜索和筛选功能等。
标签：index,Vue,vue,js,任务,待办,组件,todos From： https://blog.csdn.net/byby0325_/article/details/144506551