ToB企服应用市场:ToB评测及商务社交产业平台

标题: 使用Vue.js构建待办事项应用：从零到上线 [打印本页]
作者: 汕尾海湾    时间: 2024-12-20 17:45
标题: 使用Vue.js构建待办事项应用：从零到上线
前言

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

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

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


项目结构

  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>
复制代码
说明


当地存储功能

       通过 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4