学习 Vue.js：从零开始 – wiki大全

作者： /

学习 Vue.js：从零开始

在当今快速发展的 Web 开发领域，选择一个合适的 JavaScript 框架对于构建高效、可维护且富有交互性的用户界面至关重要。Vue.js 以其渐进式框架的特性、易学易用和卓越的性能，成为了众多开发者（无论是初学者还是经验丰富的专家）的首选。

本文将带领您从零开始，逐步深入了解 Vue.js 的世界，帮助您掌握其核心概念并开始构建您的第一个 Vue 应用。

1. 为什么选择 Vue.js？

在开始学习之前，我们先来看看 Vue.js 的一些主要优势：

  • 渐进式框架 (Progressive Framework)：Vue.js 可以逐步集成到您的项目中。您可以只使用它的一部分功能来增强现有 HTML 页面，也可以构建复杂的单页面应用 (SPA)。
  • 易学易用：Vue.js 拥有简洁的 API 和详尽的中文文档，学习曲线平缓，对于有 HTML、CSS 和 JavaScript 基础的开发者来说非常友好。
  • 高性能：通过虚拟 DOM (Virtual DOM) 和优化的更新机制，Vue.js 能够提供出色的渲染性能。
  • 灵活强大：提供了一整套生态系统，包括路由 (Vue Router)、状态管理 (Vuex/Pinia)、构建工具 (Vue CLI/Vite) 等，可以满足各种项目需求。
  • 活跃的社区：拥有庞大且活跃的社区，遇到问题时可以轻松找到帮助和资源。

2. 环境搭建

学习 Vue.js 的第一步是设置开发环境。最简单快捷的方式是使用 Vite 或 Vue CLI。

使用 Vite (推荐)

Vite 是一个下一代前端工具，提供了极快的冷启动、即时模块热更新和更快的构建速度。

  1. 安装 Node.js：确保您的计算机上安装了 Node.js（推荐 LTS 版本）。您可以从 Node.js 官网 下载安装。

  2. 创建 Vue 项目：打开命令行工具，运行以下命令：

    bash
    npm create vue@latest

    或者

    bash
    yarn create vue@latest

    或者

    bash
    pnpm create vue@latest

    按照提示选择您想要的配置（例如 TypeScript、JSX 支持、Vue Router、Pinia 等）。
    3. 进入项目目录并运行：

    bash
    cd <your-project-name>
    npm install # 或者 yarn 或 pnpm
    npm run dev

    您的第一个 Vue 应用将在 http://localhost:5173（或类似地址）运行。

使用 Vue CLI (传统方式)

Vue CLI 是一个功能完备的 Vue 项目脚手架。

  1. 安装 Node.js：同上。

  2. 安装 Vue CLI：

    “`bash
    npm install -g @vue/cli

    或者 yarn global add @vue/cli

    “`

  3. 创建 Vue 项目：

    bash
    vue create <your-project-name>

    选择一个预设（例如默认或手动配置）。
    4. 进入项目目录并运行：

    bash
    cd <your-project-name>
    npm run serve

    您的应用将在 http://localhost:8080（或类似地址）运行。

3. Vue 应用的基本结构

一个典型的 Vue 项目结构如下：

your-project-name/
├── public/ # 静态资源
├── src/
│ ├── assets/ # CSS, 图片等
│ ├── components/ # 可复用的 Vue 组件
│ ├── App.vue # 根组件
│ ├── main.js # 应用入口文件
│ └── style.css # 全局样式
├── package.json # 项目依赖和脚本
└── index.html # 应用的 HTML 模板

  • main.js (或 main.ts)：这是应用程序的入口点。它负责创建 Vue 实例并将根组件挂载到 index.html 中的一个 DOM 元素上。
  • App.vue：这是应用程序的根组件，所有其他组件都将嵌套在其中。
  • .vue 文件 (单文件组件 – SFC)：Vue 推荐使用单文件组件 (.vue) 来组织代码。每个 .vue 文件包含三个主要部分：
    • <template>：HTML 模板部分，定义组件的结构。
    • <script>：JavaScript 部分，定义组件的逻辑（数据、方法、生命周期钩子等）。
    • <style>：CSS 部分，定义组件的样式。

4. 核心概念

掌握以下核心概念是学习 Vue.js 的关键。

4.1 声明式渲染与数据绑定

Vue.js 的核心是数据驱动的声明式渲染。您只需要声明您的数据如何映射到 DOM，Vue 会负责保持两者同步。

“`html

“`

  • {{ message }}：文本插值。Vue 会将 data 中 message 的值渲染到 HTML 中。当 message 改变时，HTML 会自动更新。
  • v-if="isVisible"：条件渲染指令。当 isVisible 为 true 时，元素被渲染；为 false 时，元素被从 DOM 中移除。
  • @click="toggleVisibility"：事件绑定指令 (v-on:click 的简写)。当按钮被点击时，会调用 methods 中定义的 toggleVisibility 方法。

4.2 响应式系统

Vue.js 最强大的功能之一是其响应式系统。当 data 对象中的数据发生变化时，视图会自动更新，无需手动操作 DOM。

这是通过 Vue 2 的 Object.defineProperty 或 Vue 3 的 Proxy 实现的。您只需声明数据，Vue 就会使其成为响应式的。

4.3 组件化

组件是 Vue.js 应用程序的基石。它们是可复用、自包含的代码块，每个组件都有自己的模板、脚本和样式。

“`html

“`

在父组件中使用 MyButton：

“`html

“`

  • props (属性)：父组件向子组件传递数据的方式。text prop 允许我们自定义按钮的文本。
  • $emit (事件)：子组件向父组件发送消息的方式。当按钮被点击时，MyButton 组件会触发一个名为 button-clicked 的事件，父组件可以通过 @button-clicked 监听并响应。
  • scoped 样式：<style scoped> 属性可以确保样式仅应用于当前组件，避免样式冲突。

4.4 指令 (Directives)

指令是带有 v- 前缀的特殊属性。它们用于在渲染的 DOM 上应用特殊的响应式行为。

  • v-bind (简写 :)：动态绑定 HTML 属性到表达式。

    html
    <img :src="imageUrl" :alt="imageAlt" />

  • v-model (双向绑定)：用于在表单输入元素上创建双向数据绑定。它会根据控件类型自动选取正确的方式来更新元素。

    html
    <input type="text" v-model="userName" />
    <p>您的名字是：{{ userName }}</p>

  • v-for (列表渲染)：基于源数据多次渲染元素或模板块。

    html
    <ul>
    <li v-for="(item, index) in items" :key="index">
    {{ index }} - {{ item }}
    </li>
    </ul>

4.5 计算属性 (Computed Properties)

计算属性是基于它们的响应式依赖进行缓存的。只有当依赖的数据发生变化时，它们才会重新求值。这比在模板中直接放置复杂表达式更高效、更可读。

“`html

“`

4.6 侦听器 (Watchers)

侦听器允许您响应数据的变化执行异步或开销较大的操作。当一个响应式属性需要进行一些“副作用”操作时，可以使用侦听器。

“`html

“`

4.7 生命周期钩子 (Lifecycle Hooks)

每个 Vue 组件实例在创建时都会经历一系列的初始化步骤。例如，它会设置数据侦听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM。在此过程中，也会运行一些叫做生命周期钩子的函数，让您有机会在不同阶段运行自己的代码。

常用钩子：

  • onMounted (Vue 3 Composition API) / mounted (Vue 2/3 Options API)：组件挂载到 DOM 后调用。适合进行 DOM 操作、发送网络请求。
  • onUpdated (Vue 3 Composition API) / updated (Vue 2/3 Options API)：响应式数据导致 DOM 更新后调用。
  • onUnmounted (Vue 3 Composition API) / unmounted (Vue 2/3 Options API)：组件从 DOM 中卸载后调用。适合清理定时器、取消订阅。

5. 编写你的第一个 Vue 应用 (一个简单的计数器)

让我们用 Vue 3 的 Composition API 来创建一个简单的计数器。

“`html

“`

在这个例子中：

  • ref 函数用于创建响应式变量。访问其值时需要使用 .value。
  • computed 用于创建计算属性，同样通过 .value 访问其结果。
  • watch 用于侦听 count 变量的变化。
  • onMounted 在组件挂载时执行一次。
  • script setup 是一种编译时语法糖，极大地简化了 Composition API 的使用，让组件代码更简洁。

6. 进阶学习路线

当您掌握了上述基础知识后，可以进一步探索 Vue.js 的生态系统：

  • Vue Router：用于构建单页面应用的路由系统。
  • Pinia (推荐) / Vuex：Vue 的官方状态管理库，用于管理大型应用中的共享状态。
  • 网络请求：使用 axios 或浏览器原生的 fetch API 与后端交互。
  • Vue Test Utils：Vue 官方的组件测试工具库。
  • TypeScript：为您的 Vue 项目添加类型支持，提高代码质量和可维护性。
  • 服务器端渲染 (SSR) / 静态站点生成 (SSG)：使用 Nuxt.js 等框架构建更强大的应用。
  • 动画与过渡：Vue 提供了内置的 <Transition> 和 <TransitionGroup> 组件来处理元素进入/离开 DOM 时的过渡效果。

总结

Vue.js 是一个强大而灵活的前端框架，其直观的 API 和出色的性能使其成为构建现代 Web 应用程序的绝佳选择。从本文开始，您应该对 Vue.js 的核心概念有了基本的理解，并能够开始构建简单的应用。

最重要的学习方法是实践。尝试修改上面的计数器示例，或者根据您自己的想法构建一个小应用。阅读官方文档、参与社区讨论，并不断探索 Vue.js 的更多可能性。祝您学习愉快！

滚动至顶部