使用Vue.js构建待办事项应用：从零到上线

前言

       Vue.js 是一个渐进式 JavaScript 框架，旨在构建用户界面。它简洁易用，支持组件化开发，非常适合中小型项目和单页面应用。本文将通过构建一个待办事项应用，展示如何使用 Vue.js 开发前端项目。我们会一步步讲解项目标核心功能，并最终将项目摆设上线。
项目背景

       待办事项应用是前端开发中常见的练习项目，旨在资助用户记录和管理一样平常任务。本项目将实现如下功能：

• 添加待办事项
  
• 标记任务为完成
  
• 删除任务
  
• 基于当地存储生存任务状态
  

       通过这些功能，初学者可以快速把握 Vue.js 的基本用法以及如何与欣赏器的当地存储交互。
技术选型

• Vue.js 3：用于构建用户界面，使用组合式 API（Composition API）举行组件开发。
  
• Vue CLI：用于快速创建 Vue 项目，并举行当地开发与调试。
  
• LocalStorage：用于持久化存储任务，避免页面革新后数据丢失。
  

项目结构

1. vue-todo-app
2. │
3. ├── public/           # 公共静态资源
4. ├── src/              # 源代码目录
5. │   ├── components/   # Vue 组件
6. │   ├── App.vue       # 主应用组件
7. │   ├── main.js       # 入口文件
8. │
9. └── package.json      # 项目信息

复制代码

搭建项目

       起首，我们使用 Vue CLI 创建一个新的 Vue 项目：

1. vue create vue-todo-app

复制代码

       选择默认的 Vue 3 模板，然后进入项目目录并启动开发服务器：

1. cd vue-todo-app
2. npm run serve

复制代码

       这将启动当地开发服务器，并在欣赏器中打开 localhost:8080，你将看到一个基本的 Vue 项目框架。
核心代码

任务列表组件

       我们起首创建一个 TodoList 组件，用于展示待办事项列表。该组件负责表现任务，并允许用户标记任务为完成或删除任务。

1. <!-- src/components/TodoList.vue -->
2. <template>
3.   <div class="todo-list">
4.     <h2>My To-Do List</h2>
5.     <ul>
6.       <li v-for="(todo, index) in todos" :key="index">
7.         <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
8.         <button @click="toggleComplete(index)">✔</button>
9.         <button @click="removeTask(index)">✖</button>
10.       </li>
11.     </ul>
12.   </div>
13. </template>
15. <script>
16. export default {
17.   props: {
18.     todos: Array
19.   },
20.   methods: {
21.     toggleComplete(index) {
22.       this.$emit('toggle-complete', index);
23.     },
24.     removeTask(index) {
25.       this.$emit('remove-task', index);
26.     }
27.   }
28. };
29. </script>
31. <style scoped>
32. .completed {
33.   text-decoration: line-through;
34. }
35. </style>

复制代码

添加任务组件

       接下来，我们创建一个 AddTask 组件，用户可以通过该组件添加新的待办事项。

1. <!-- src/components/AddTask.vue -->
2. <template>
3.   <div class="add-task">
4.     <input v-model="newTask" @keyup.enter="addTask" placeholder="What do you need to do?" />
5.     <button @click="addTask">Add</button>
6.   </div>
7. </template>
9. <script>
10. export default {
11.   data() {
12.     return {
13.       newTask: ''
14.     };
15.   },
16.   methods: {
17.     addTask() {
18.       if (this.newTask.trim()) {
19.         this.$emit('add-task', this.newTask);
20.         this.newTask = '';
21.       }
22.     }
23.   }
24. };
25. </script>
27. <style scoped>
28. .add-task {
29.   margin-bottom: 20px;
30. }
31. </style>

复制代码

组合组件与逻辑

       在 App.vue 中，我们将 TodoList 和 AddTask 组件组合在一起，并实现添加任务、标记任务完成和删除任务的逻辑。同时，我们使用 LocalStorage 来存储任务列表。

1. <!-- src/App.vue -->
2. <template>
3.   <div id="app">
4.     <h1>Vue To-Do List</h1>
5.     <AddTask @add-task="addTask" />
6.     <TodoList :todos="todos" @toggle-complete="toggleComplete" @remove-task="removeTask" />
7.   </div>
8. </template>
10. <script>
11. import AddTask from './components/AddTask.vue';
12. import TodoList from './components/TodoList.vue';
14. export default {
15.   components: {
16.     AddTask,
17.     TodoList
18.   },
19.   data() {
20.     return {
21.       todos: []
22.     };
23.   },
24.   methods: {
25.     addTask(task) {
26.       this.todos.push({ text: task, completed: false });
27.       this.saveTodos();
28.     },
29.     toggleComplete(index) {
30.       this.todos[index].completed = !this.todos[index].completed;
31.       this.saveTodos();
32.     },
33.     removeTask(index) {
34.       this.todos.splice(index, 1);
35.       this.saveTodos();
36.     },
37.     saveTodos() {
38.       localStorage.setItem('todos', JSON.stringify(this.todos));
39.     },
40.     loadTodos() {
41.       const savedTodos = localStorage.getItem('todos');
42.       if (savedTodos) {
43.         this.todos = JSON.parse(savedTodos);
44.       }
45.     }
46.   },
47.   mounted() {
48.     this.loadTodos();
49.   }
50. };
51. </script>
53. <style>
54. #app {
55.   font-family: Avenir, Helvetica, Arial, sans-serif;
56.   text-align: center;
57.   margin-top: 60px;
58. }
59. </style>

复制代码

说明

• App.vue 是主应用组件，负责将全部逻辑和组件联合在一起。
  
• AddTask 组件用于添加新任务，当用户点击按钮或按下回车时，新的任务将通过变乱传递给父组件 App.vue。
  
• TodoList 组件负责表现任务列表，而且可以通过变乱触发标记任务完成或删除任务。
  

当地存储功能

       通过 LocalStorage 我们可以将任务持久化生存。当用户革新页面时，任务不会丢失。

1. saveTodos() {
2.   localStorage.setItem('todos', JSON.stringify(this.todos));
3. },
4. loadTodos() {
5.   const savedTodos = localStorage.getItem('todos');
6.   if (savedTodos) {
7.     this.todos = JSON.parse(savedTodos);
8.   }
9. }

复制代码

       saveTodos 方法在任务列表发生变化时被调用，将当前任务列表生存到 LocalStorage 中。loadTodos 方法则在应用加载时读取并恢复任务列表。
摆设上线

       开发完成后，我们可以通过 Vue CLI 将项目打包并摆设到静态服务器上。
       起首，运行以下下令打包项目：

1. npm run build

复制代码

       这将在 dist/ 目录中生成优化后的静态文件。接下来，可以将这些文件上传到 GitHub Pages、Netlify 或 Vercel 等平台举行托管。
项目总结

       通过这个项目，我们实现了一个功能简单但实用的待办事项应用。项目中展示了 Vue.js 的核心概念，如组件化开发、数据绑定和变乱处理。同时，通过使用当地存储，我们实现了任务的持久化，增强了用户体验。这个项目可以进一步扩展，例如添加任务分类、设置优先级、任务搜索和筛选功能等。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。