首页 > 文章 > web前端 > Vue.js 中的简单待办事项列表应用程序分步指南

Vue.js 中的简单待办事项列表应用程序分步指南

王林原创: 2024-09-05 06:35:09554浏览

Simple To-Do List Application in Vue.js Step-by-Step Guide

本指南将引导您使用 Vue.js 3 构建基本的待办事项列表应用程序。在本教程结束时，您将了解如何处理数据绑定、事件Vue.js 中的处理和动态渲染。

先决条件

HTML、CSS 和 JavaScript 的基本知识。
Node.js 和 npm 安装在您的计算机上。
Vue CLI 已安装。如果没有，您可以通过运行 npm install -g @vue/cli 来安装它。

第 1 步：设置项目

创建新的 Vue.js 项目：打开终端并运行以下命令来创建新的 Vue.js 3 项目：

vue create todo-app

导航到项目目录：

cd todo-app

运行开发服务器：启动Vue开发服务器：

npm run serve

这将在浏览器中打开默认的 Vue.js 入门模板，地址为 http://localhost:8080。

第 2 步：构建应用程序

清理默认模板：打开 src/App.vue 并删除默认模板、脚本和样式内容。将它们替换为以下代码：

<template>
  <div id="app">
    <h1>Vue.js To-Do List</h1>
    <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
    <button @click="addTask">Add Task</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <input type="checkbox" v-model="task.completed" />
        <span :class="{ 'completed-task': task.completed }">{{ task.text }}</span>
        <button @click="removeTask(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ text: this.newTask, completed: false });
        this.newTask = '';
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.completed-task {
  text-decoration: line-through;
  color: grey;
}
input {
  margin-bottom: 10px;
  padding: 5px;
}
button {
  margin-left: 5px;
  padding: 5px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
}
</style>

第 3 步：理解代码

模板部分：

：该输入字段使用 v-model 绑定到 newTask 数据属性，从而实现双向数据绑定。 @keyup.enter="addTask" 监听 Enter 键来触发 addTask 方法。

添加任务按钮>
：该按钮点击时会触发addTask方法。

：切换任务完成状态的复选框。

{{ task.text }}; ：span 元素显示任务文本。 :class 指令根据任务是否完成有条件地应用已完成任务 CSS 类。

<按钮@click="removeTask(index)">删除：从列表中删除任务的按钮

脚本部分：

data() 方法：
newTask：一个字符串，保存要添加的新任务的值。
任务：保存所有任务的数组，每个任务表示为具有文本和已完成属性的对象。

方法对象：
addTask()：此方法将 newTask 添加到任务数组中，然后清除 newTask 输入字段。
removeTask(index)：此方法根据索引从任务数组中删除任务。

风格部分：

用于设置待办事项列表样式的基本 CSS，并使用 .completed-task 类来删除已完成的任务。

将任务保留在本地存储中：您可以通过将任务保存在浏览器的本地存储中来增强应用程序，以便它们在页面重新加载时保留下来。

mounted() {
  this.tasks = JSON.parse(localStorage.getItem('tasks')) || [];
},
methods: {
  addTask() {
    if (this.newTask.trim() !== '') {
      this.tasks.push({ text: this.newTask, completed: false });
      this.newTask = '';
      localStorage.setItem('tasks', JSON.stringify(this.tasks));
    }
  },
  removeTask(index) {
    this.tasks.splice(index, 1);
    localStorage.setItem('tasks', JSON.stringify(this.tasks));
  }
}

编辑任务：

<template>
  <div id="app">
    <h1>Vue.js To-Do List</h1>
    <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
    <button @click="addTask">Add Task</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <input type="checkbox" v-model="task.completed" />

        <span v-if="!task.isEditing" :class="{ 'completed-task': task.completed }">{{ task.text }}</span>
        <input v-else v-model="task.text" @keyup.enter="saveTask(task)" @blur="saveTask(task)" />

        <button v-if="!task.isEditing" @click="editTask(task)">Edit</button>
        <button @click="removeTask(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ text: this.newTask, completed: false, isEditing: false });
        this.newTask = '';
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    },
    editTask(task) {
      task.isEditing = true;
    },
    saveTask(task) {
      task.isEditing = false;
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.completed-task {
  text-decoration: line-through;
  color: grey;
}
input {
  margin-bottom: 10px;
  padding: 5px;
}
button {
  margin-left: 5px;
  padding: 5px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
}
</style>

安装真棒字体

首先，在您的项目中包含 Font Awesome。如果您使用 CDN，则可以将此链接添加到 HTML 文件中或直接添加到 index.html 的

部分中。

** 使用图标更新模板
**

现在，让我们添加一些 Font Awesome 图标，用于编辑、删除和完成任务。

<template>
  <div id="app" class="container">
    <h1>Vue.js To-Do List</h1>
    <div class="input-container">
      <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
      <button @click="addTask" class="btn btn-add"><i class="fas fa-plus"></i></button>
    </div>
    <ul>
      <li v-for="(task, index) in tasks" :key="index" :class="{ completed: task.completed }">
        <input type="checkbox" v-model="task.completed" id="checkbox" />

        <span v-if="!task.isEditing" class="task-text">{{ task.text }}</span>
        <input v-else v-model="task.text" @keyup.enter="saveTask(task)" @blur="saveTask(task)" class="edit-input" />

        <div class="actions">
          <button v-if="!task.isEditing" @click="editTask(task)" class="btn btn-edit"><i class="fas fa-edit"></i></button>
          <button @click="removeTask(index)" class="btn btn-delete"><i class="fas fa-trash-alt"></i></button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ text: this.newTask, completed: false, isEditing: false });
        this.newTask = '';
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    },
    editTask(task) {
      task.isEditing = true;
    },
    saveTask(task) {
      task.isEditing = false;
    }
  }
};
</script>

<style>
body {
  background-color: #f4f7f6;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  padding: 20px;
  max-width: 400px;
  width: 100%;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

.input-container {
  display: flex;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 5px;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #45a049;
}

.btn-add {
  background-color: #28a745;
}

.btn-edit {
  background-color: #ffc107;
}

.btn-delete {
  background-color: #dc3545;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f8f9fa;
}

li.completed .task-text {
  text-decoration: line-through;
  color: #888;
}

li:hover {
  background-color: #e9ecef;
}

.actions {
  display: flex;
}

.actions .btn {
  margin-left: 5px;
}

.edit-input {
  flex: 1;
  margin-right: 10px;
}
</style>

以上是Vue.js 中的简单待办事项列表应用程序分步指南的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css ajax html npm String Array Object if for checkbox include Directory using class Property Event delete JS default this href input ul http https

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Essential WordPress Plugins for Boosting Website Performance下一篇：Encore.ts — Faster cold starts than NestJS & Fastify

查看更多