HelloVue：轻松入门 Vue.js，玩转待办事项应用！

2023-09-21 09:50:13

Vue.js 入门实战：打造你的第一个 Todo 应用，HelloVue 闪亮登场！

欢迎来到 HelloVue-todo-tutorial！作为 HelloDjango 系列的番外篇，本教程将手把手教你从零开始使用 Vue.js 搭建一个 Todo（待办事项）应用。通过这个教程，你将深入了解 Vue.js 的基本概念，并为后续使用前后端分离的方式开发 Django 应用打下基础。

Vue.js 简介

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。它的优势在于简单易学、灵活轻量，是构建交互式 web 应用的理想选择。

本教程目标

本教程旨在帮助你：

了解 Vue.js 的基本概念，如组件、数据绑定和响应式系统。
通过构建一个 Todo 应用，掌握 Vue.js 的实际应用技能。
培养对前端开发和 Web 技术的兴趣。

准备工作

在开始本教程之前，请确保你已具备以下先决条件：

对 HTML、CSS 和 JavaScript 有基本了解。
已安装 Node.js 和 npm（Node 包管理器）。

安装 Vue.js

首先，使用 npm 安装 Vue.js：

npm install -g @vue/cli

然后，创建一个新的 Vue.js 项目：

vue create hellovue

进入项目目录：

cd hellovue

构建 Todo 应用

创建组件

在 src 目录中，创建一个名为 Todo.vue 的文件：

<template>
  <div>
    <input v-model="newTodo" placeholder="添加待办事项">
    <button @click="addTodo">添加</button>
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: Date.now(), text: this.newTodo });
      this.newTodo = '';
    }
  }
};
</script>

注册组件

在 src/main.js 中，注册 Todo 组件：

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

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

new Vue({
  render: h => h(App)
}).$mount('#app')