Vue.js 快速入门实战

Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。与其他框架不同，Vue 采用自底向上的增量开发设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。本文将带你快速入门 Vue.js，并通过一个简单的实战项目帮助你更好地理解和掌握 Vue 的基本用法。

1. 安装 Vue.js

在开始之前，确保你已经安装了 Node.js 和 npm（Node Package Manager）。你可以通过以下命令检查是否已经安装：

node -v
npm -v
  • 1.
  • 2.

如果没有安装，可以访问  Node.js 官方网站下载安装。

1.1 使用 Vue CLI 安装 Vue

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。你可以通过以下命令全局安装 Vue CLI：

npm install -g @vue/cli
  • 1.

安装完成后，你可以使用以下命令创建一个新的 Vue 项目：

vue create my-project
  • 1.

按照提示选择默认配置或自定义配置，稍等片刻，项目初始化完成。

1.2 使用 CDN 引入 Vue

如果你不想使用 Vue CLI，可以通过 CDN 引入 Vue.js。这对于快速测试或在简单项目中使用非常方便。你只需在 HTML 文件中加入以下代码：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  • 1.

2. 创建一个简单的 Vue 项目

接下来，我们将通过一个简单的项目示例来学习 Vue 的基本用法。我们将创建一个简单的待办事项（To-Do List）应用。

2.1 创建项目结构

首先，创建一个新的文件夹，并在其中创建以下文件：

my-todo-app/
├── index.html
└── main.js
  • 1.
  • 2.
  • 3.
2.2 编写 HTML 文件

在 index.html 中编写以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue To-Do List</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>待办事项列表</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新任务">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <span>{{ todo }}</span>
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
  </div>
  <script src="main.js"></script>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
2.3 编写 JavaScript 文件

在 main.js 中编写以下内容：

new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: []
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== '') {
        this.todos.push(this.newTodo.trim());
        this.newTodo = '';
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
2.4 运行项目

打开 index.html 文件，你将看到一个简单的待办事项列表应用。你可以在输入框中输入任务并按回车键添加任务，也可以点击“删除”按钮删除任务。

3. 解析代码

Vue.js 快速入门实战_Vue

3.1 HTML 文件

在 HTML 文件中，我们使用了一个 div 元素作为 Vue 实例的挂载点，并在其中添加了一个输入框和一个列表。输入框使用 v-model 指令绑定到 Vue 实例的数据属性 newTodo，并在 keyup.enter 事件上调用 addTodo 方法。列表使用 v-for 指令渲染每个任务，并为每个任务添加了一个“删除”按钮，点击按钮调用 removeTodo 方法。

3.2 JavaScript 文件

在 JavaScript 文件中，我们创建了一个新的 Vue 实例，并指定了挂载点 #app。在 data 选项中，我们定义了两个数据属性：newTodo 和 todos。在 methods 选项中，我们定义了两个方法：addTodo 和 removeTodo。addTodo 方法用于将新任务添加到任务列表中，removeTodo 方法用于从任务列表中删除任务。

4. 总结

通过这个简单的待办事项列表应用，我们学习了 Vue.js 的基本用法，包括数据绑定、事件处理和列表渲染。Vue.js 的设计使得它非常易于上手，并且能够与其他库或已有项目无缝整合。希望这篇文章能帮助你快速入门 Vue.js，并为你的前端开发之旅打下坚实的基础。

接下来，你可以继续学习 Vue 的其他特性，例如组件、路由和状态管理等，以便在更复杂的项目中更好地使用 Vue.js。祝你学习愉快！

⭐️ 好书推荐

《Vue.js 快速入门实战》

Vue.js 快速入门实战_vue.js_02

【内容简介】

Vue.js 快速入门实战以Vue.js的知识点为基础，结合TypeScript的使用，循序渐进地介绍了Vue.js 3.0（简称Vue3）的知识点和实战技巧，可以帮助零基础的读者掌握独立开发项目和部署项目上线的技术。全书共14章，包括Vue.js概述、搭建开发环境、Vue.js组合式API、Vue.js的模板语法、Vue.js的计算属性和侦听器、Vue.js中class和style的绑定、Vue.js的表单开发、Vue.js的组件开发、Vue.js的网络请求、Vue.js的状态管理、Vue.js的路由管理、Vue的项目部署、在线招聘网站开发实战以及招聘网站后台管理系统开发实战。