Vue Todo案例(五)：助力构建高效待办事项清单

前端

2023-12-16 07:26:46

在激烈的数字竞争中，时间管理已成为我们生存和发展的重要利器。而Todo应用作为时间管理的好帮手，早已被许多人使用，Vue.js作为一个优秀的框架，更是能够帮助我们快速构建一个基础版的Todo应用，高效处理待办事项。

1. 准备工作

在开始构建我们的Todo应用之前，我们先来熟悉一下Vue.js的基本知识。

1.1 Vue.js简介

Vue.js是一个轻量级的前端JavaScript框架，以其简单性、易用性和响应式数据绑定而闻名。它使用一种声明式模板系统，允许我们以一种简洁的方式来定义我们的应用程序的UI。

1.2 安装Vue.js

安装Vue.js非常简单，我们只需要在我们的项目中引入一个名为vue.js的文件即可。我们可以通过以下方式进行安装：

npm install vue --save

2. 构建Todo应用

2.1 创建一个新的Vue.js项目

使用Vue CLI来创建一个新的Vue.js项目。

vue create todo-app

这将创建一个新的Vue.js项目，并安装必要的依赖项。

2.2 创建一个Todo组件

在src目录下创建一个名为Todo.vue的文件，这是我们的Todo组件。在这个文件中，我们将定义我们的Todo组件的模板和逻辑。

<template>
  <div>
    <input type="text" v-model="newTodo" placeholder="Add a new todo">
    <button @click="addTodo">Add</button>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="deleteTodo(todo)">X</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({
          id: Date.now(),
          text: this.newTodo
        })
        this.newTodo = ''
      }
    },
    deleteTodo(todo) {
      this.todos = this.todos.filter(t => t.id !== todo.id)
    }
  }
}
</script>

2.3 注册Todo组件

在src/main.js文件中，将Todo组件注册为一个全局组件。

import Vue from 'vue'
import App from './App.vue'
import Todo from './components/Todo.vue'

Vue.component('todo-component', Todo)

new Vue({
  el: '#app',
  render: h => h(App)
})

2.4 运行应用程序

使用以下命令运行应用程序：

npm run serve

这将在您的浏览器中打开应用程序，您可以在其中添加、删除和标记待办事项。

3. 扩展Todo应用

3.1 添加计算属性

计算属性允许我们从组件的数据中派生出新的数据。例如，我们可以创建一个计算属性来返回已完成的待办事项的数量。

export default {
  // ...
  computed: {
    completedTodos() {
      return this.todos.filter(todo => todo.completed).length
    }
  }
}

3.2 添加过渡效果

过渡效果允许我们在元素之间切换时添加动画。例如，我们可以添加一个过渡效果来淡入或淡出待办事项。

.todo-item {
  transition: all 0.2s ease-in-out
}

.todo-item--enter {
  opacity: 0
}

.todo-item--enter-active {
  opacity: 1
}

.todo-item--leave {
  opacity: 1
}

.todo-item--leave-active {
  opacity: 0
}