Vue 从入门到实战：构建 Todo 应用，管理任务事半功倍

2023-10-30 04:55:56

让我们开始吧！

1. 初识 Vue.js

Vue.js 是一个用于构建用户界面的 JavaScript 框架，它以其简单、灵活和易学而著称。与其他前端框架相比，Vue.js 具有更轻量、更易理解的语法，同时提供了丰富的功能和工具来满足开发者的需求。

2. 搭建开发环境

在开始构建 Todo 应用之前，我们需要先搭建好开发环境。你可以使用你熟悉的代码编辑器或 IDE，并安装 Node.js 和 Vue CLI。Node.js 是一个 JavaScript 运行时环境，而 Vue CLI 是一个命令行工具，它可以帮助你快速创建和管理 Vue.js 项目。

3. 创建 Vue.js 项目

使用 Vue CLI 创建一个新的 Vue.js 项目，并命名为 todo-app。在命令行中输入以下命令：

vue create todo-app

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

4. 编写 Todo 应用的 HTML 模板

接下来，我们需要编写 Todo 应用的 HTML 模板。我们将创建一个 index.html 文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
</head>
<body>
  <div id="app">
    <h1>Todo List</h1>
    <ul>
      <li v-for="todo in todos">
        {{ todo.text }}
        <button @click="removeTodo(todo)">X</button>
      </li>
    </ul>
    <input type="text" v-model="newTodoText">
    <button @click="addTodo">Add</button>
  </div>

  <script src="main.js"></script>
</body>
</html>

在这个模板中，我们定义了一个 Vue.js 根组件，并使用 v-for 指令来遍历 todos 数组并渲染出 Todo 列表。我们还定义了两个按钮，分别用于添加和删除 Todo 项目。

5. 编写 Todo 应用的 JavaScript 代码

在 main.js 文件中，我们将编写 Todo 应用的 JavaScript 代码。我们首先需要创建一个 Vue.js 实例，并定义 todos 数据数组和相关的方法：

const app = new Vue({
  el: '#app',
  data: {
    todos: [],
    newTodoText: ''
  },
  methods: {
    addTodo() {
      this.todos.push({
        text: this.newTodoText
      });
      this.newTodoText = '';
    },
    removeTodo(todo) {
      const index = this.todos.indexOf(todo);
      this.todos.splice(index, 1);
    }
  }
});