Vue白皮书：化繁为简，踏上你的Vue初探之旅

2023-03-30 21:24:12

初探 Vue.js：构建一个简易 TodoList，体验 Web 开发的魔法

在 Web 开发的浩瀚世界中，Vue.js 框架宛如一位神奇的魔法师，它将复杂的代码转化为优雅的艺术，让开发者在构建应用程序时如鱼得水。今天，让我们踏上 Vue.js 的初探之旅，使用 Vue 创建一个简易的 TodoList，让你对这个迷人的框架有更深入的理解。

构建 TodoList：从无到有

我们的目标是创建一个能够添加和删除任务的 TodoList。为了实现这个目标，我们只需几个简单的步骤：

1. 安装 Vue.js

首先，在你的终端中输入以下命令来安装 Vue.js：

npm install vue

2. 创建 Vue 组件

组件是 Vue.js 中的可复用代码块，它们就像应用程序中的乐高积木。对于我们的 TodoList，我们需要创建一个名为 todo-item 的组件来表示每个任务：

Vue.component('todo-item', {
  props: ['item'], // 接收从父组件传递过来的任务文本
  template: '<li>{{ item }}</li>' // 渲染任务文本为列表项
});

3. 创建 Vue 实例

Vue 实例是 Vue.js 应用程序的入口点，它管理着应用程序的状态和行为：

const app = new Vue({
  el: '#app', // 将 Vue 实例绑定到 HTML 中的 #app 元素
  data: {
    todos: [] // 初始化一个空数组来存储任务
  },
  methods: {
    addTodo: function(e) {
      this.todos.push(e.target.value); // 将输入框中的值添加到 todos 数组
      e.target.value = ''; // 清空输入框
    }
  }
});

4. 添加 HTML 结构

最后，我们需要添加 HTML 结构来显示我们的 TodoList：

<div id="app">
  <input v-model="newTodo" @keyup.enter="addTodo"> <!-- 输入框，用于输入新任务 -->
  <button @click="addTodo">添加</button> <!-- 添加按钮，用于添加任务 -->
  <ul>
    <todo-item v-for="todo in todos" :item="todo"></todo-item> <!-- 循环遍历 todos 数组，渲染每个任务 -->
  </ul>
</div>