一篇就够！Vue.js 从入门到实践 – wiki基地

作者： /

Vue.js 从入门到实践：一篇就够的深度指南

在当今前端技术百花齐放的时代，Vue.js 以其平易近人的学习曲线、卓越的性能和完善的生态系统，成为了无数开发者心中的“白月光”。它既能像一把轻巧的瑞士军刀，在现有项目中渐进式地增强页面交互，也能作为构建大型、复杂单页应用（SPA）的坚实骨架。

本文旨在成为你的“Vue.js 学习地图”，带你从零基础开始，一步步掌握其核心概念，理解其生态工具，并最终能够运用它进行实际项目开发。无论你是前端新手，还是希望系统性巩固 Vue 知识的开发者，这篇文章都将为你提供清晰的指引。

第一章：初识 Vue —— 思想与基础

在深入代码之前，我们首先要理解 Vue 的核心思想：数据驱动视图和组件化。

  • 数据驱动视图：这是 Vue 最核心的魔法。传统的前端开发，我们需要手动操作 DOM（文档对象模型）来更新页面。比如，获取一个 DOM 元素，然后修改它的 innerHTML 或 style。而在 Vue 中，我们只需要关心数据（Data）的变更，Vue 会通过其响应式系统，自动地、高效地将这些数据变化反映到视图（View）上。你改数据，页面就自动更新，开发者得以从繁琐的 DOM 操作中解放出来。
  • 组件化：现代 Web 应用的界面通常非常复杂。组件化允许我们将一个庞大的页面拆分成一个个独立的、可复用的、功能内聚的小单元（组件）。每个组件都有自己的 HTML 模板、JavaScript 逻辑和 CSS 样式。这种方式极大地提高了代码的可维护性、复用性和团队协作效率。

1.1 第一个 Vue 应用

让我们从最简单的方式开始。你不需要任何构建工具，只需一个 HTML 文件。

“`html




我的第一个 Vue 应用


{{ message }}



“`

打开这个 HTML 文件，你会看到页面显示“你好，Vue世界！”。点击按钮，文字会立刻改变。这个简单的例子已经展示了 Vue 的核心特性：

  • createApp({...})：创建了一个 Vue 应用实例。
  • mount('#app')：将这个应用实例“挂载”到页面上 ID 为 app 的 div 元素上。Vue 将会管理这个 div 内部的所有内容。
  • {{ message }}：这是插值语法，它会将 data 中 message 属性的值渲染到 h1 标签内。
  • data()：一个函数，返回一个对象，这个对象就是我们应用的状态（数据）。
  • @click="changeMessage"：这是事件绑定的缩写（完整写法是 v-on:click）。它表示当用户点击按钮时，调用 methods 中的 changeMessage 方法。
  • this.message = ...：在方法中，我们通过 this 访问 data 中的数据并修改它。一旦修改，页面上的 {{ message }} 会自动更新。

1.2 常用指令（Directives）

指令是带有 v- 前缀的特殊属性，它们的作用是当表达式的值改变时，将某些行为应用到 DOM 上。

  • v-bind：动态绑定属性

    • 作用：用于动态地更新 HTML 元素的属性，如 id, class, src 等。
    • 缩写：: (冒号)
    • 示例：<img :src="imageUrl">，imageUrl 是 data 中的一个变量。

  • v-model：双向数据绑定

    • 作用：在表单控件（如 <input>, <textarea>, <select>）上创建双向数据绑定。它会根据控件类型自动选取正确的方式来更新元素。
    • 示例：<input type="text" v-model="username">。当输入框内容改变，data 中的 username 会同步更新；反之，若在 JS 中修改 username，输入框的内容也会改变。

  • v-if, v-else, v-else-if：条件渲染

    • 作用：根据表达式的真假值，来决定是否渲染一个元素或一组元素。v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
    • 示例：
      html
      <div v-if="isLoggedIn">欢迎回来！</div>
      <div v-else>请先登录。</div>

  • v-show：条件显示

    • 作用：与 v-if 类似，但 v-show 的元素始终会被渲染，只是简单地基于 CSS 的 display 属性进行切换。
    • 选择：v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

  • v-for：列表渲染

    • 作用：用于基于一个数组来渲染一个列表。
    • 语法：item in items，其中 items是源数据数组，item 是被迭代的数组元素的别名。
    • 强烈建议为每个 v-for 的项提供一个唯一的 key 属性（通常是 item.id），这能帮助 Vue 识别每个节点的身份，从而高效地复用和重新排序现有元素。
    • 示例：
      html
      <ul>
      <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      </li>
      </ul>

1.3 计算属性（Computed）与侦听器（Watch）

  • 计算属性 computed: 当你需要依赖其他数据来派生出新的数据时，计算属性是最佳选择。它就像一个“智能”的数据属性，只有在它依赖的数据源发生变化时，它才会重新计算。否则，它会返回缓存的结果。这比在模板中写复杂的表达式或者在 methods 中反复调用函数要高效得多。

    javascript
    computed: {
    // 一个计算属性的 getter
    reversedMessage() {
    // `this` 指向该组件实例
    return this.message.split('').reverse().join('');
    }
    }
    在模板中可以像普通属性一样使用：{{ reversedMessage }}。

  • 侦听器 watch: 当你需要在某个数据变化时执行异步操作或开销较大的操作时，应该使用侦听器。它观察一个特定的数据源，并在其变化时执行一个函数。

    javascript
    watch: {
    // 每当 a 改变时，这个函数就会运行
    a(newValue, oldValue) {
    console.log(`a 从 ${oldValue} 变成了 ${newValue}`);
    // 在这里可以执行异步请求等
    }
    }

总结：computed 用于同步计算派生值（“算一个值”），而 watch 用于观察数据变化并执行副作用（“做一件事”）。

第二章：组件化开发 —— 构建可复用的 UI

当应用变得复杂，将所有逻辑都放在一个 Vue 实例中会变得难以维护。这时，我们就需要组件化。

2.1 什么是组件？

组件是可复用的 Vue 实例，它们拥有自己的模板、逻辑和样式。一个典型的 Vue 项目就是由一个根组件（通常是 App.vue）和许多嵌套的子组件构成的组件树。

在现代化的工作流中，我们使用 SFC（Single-File Components，单文件组件），即 .vue 文件。一个 .vue 文件通常包含三部分：

  • <template>：组件的 HTML 结构。
  • <script>：组件的 JavaScript 逻辑（数据、方法、生命周期等）。
  • <style>：组件的 CSS 样式，可以通过添加 scoped 属性使其样式只作用于当前组件。

“`vue

“`

2.2 组件间的通信

组件之间不是孤立的，它们需要相互通信。最常见的通信方式是：

  • 父传子（Props）: 父组件通过 props 选项向子组件传递数据。子组件需要明确声明它期望接收的 props。

    “`vue





    “`

  • 子传父（Custom Events）: 子组件通过 $emit 方法触发一个自定义事件，并可以附带参数。父组件通过 v-on (或 @) 来监听这个事件。

    “`vue





    “`

  • 插槽（Slots）: 当你需要父组件向子组件传递一段模板内容（而不仅仅是数据）时，插槽是完美的选择。它允许你像分发“内容卡片”一样，将父组件的内容插入到子组件预留的位置。

第三章：Vue 生态 —— 构建现代化应用

一个框架的强大与否，很大程度上取决于其生态系统。Vue 拥有一个非常成熟和活跃的生态。

3.1 构建工具：Vite

过去，Vue CLI 是创建 Vue 项目的标准方式。而现在，Vite (https://vitejs.dev/) 已经成为新一代的前端构建工具，由 Vue 的作者尤雨溪开发。它利用浏览器原生的 ES 模块支持，提供了极快的冷启动速度和闪电般的热模块替换（HMR），极大地提升了开发体验。

启动一个新项目非常简单：
npm create vue@latest

根据命令行提示，你可以选择性地集成 TypeScript、Pinia、Vue Router 等工具。

3.2 路由管理：Vue Router

对于单页应用（SPA），我们需要一个前端路由来管理页面的切换，而无需刷新整个浏览器。Vue Router 是 Vue 的官方路由管理器。

  • 核心概念：
    • routes: 定义路由规则。每个规则是一个对象，包含 path (URL路径) 和 component (对应的组件)。
    • <router-link>: 一个组件，用于生成导航链接，它会被渲染成 <a> 标签。
    • <router-view>: 一个占位符组件，用于渲染当前路由匹配到的组件。

“`javascript
// main.js 或 router/index.js
import { createRouter, createWebHistory } from ‘vue-router’;
import Home from ‘../views/Home.vue’;
import About from ‘../views/About.vue’;

const routes = [
{ path: ‘/’, component: Home },
{ path: ‘/about’, component: About },
{ path: ‘/user/:id’, component: UserProfile } // 动态路由
];

const router = createRouter({
history: createWebHistory(),
routes,
});

// 在 main.js 中
// app.use(router);
“`

3.3 状态管理：Pinia

当应用变得庞大，多个组件需要共享和修改同一份状态时，“父子通信”会变得异常复杂（即“prop drilling”，属性逐层传递）。这时，我们需要一个集中的状态管理方案。

Pinia (https://pinia.vuejs.org/) 是 Vue 官方推荐的新一代状态管理库，它比它的前辈 Vuex 更简单、更符合直觉，并且拥有完美的 TypeScript 支持。

  • 核心概念：
    • Store: 一个包含 state、getters 和 actions 的实体。你可以为应用的不同功能模块定义多个 Store。
    • state: 类似于组件的 data，是 store 的核心数据。
    • getters: 类似于组件的 computed，用于派生 state 中的数据。
    • actions: 类似于组件的 methods，用于修改 state。actions 可以是异步的。

“`javascript
// stores/counter.js
import { defineStore } from ‘pinia’;

export const useCounterStore = defineStore(‘counter’, {
state: () => ({
count: 0
}),
getters: {
doubleCount: (state) => state.count * 2
},
actions: {
increment() {
this.count++;
},
async asyncIncrement() {
// 可以在 action 中执行异步操作
await new Promise(resolve => setTimeout(resolve, 1000));
this.increment();
}
}
});
在任何组件中，你都可以轻松地使用这个 Store：vue

“`

第四章：迈向实践 —— Composition API 与项目实战

Vue 3 引入了 Composition API（组合式 API），作为对传统 Options API（选项式 API） 的补充和增强。它旨在解决大型组件中逻辑分散、难以复用和 TypeScript 类型推断不佳的问题。

在 .vue 文件的 <script setup> 块中，我们可以直接使用 Composition API。

“`vue

“`

Composition API 的核心优势在于，你可以将相关的逻辑（如某个功能的 state、computed、methods、watch）组织在一起，甚至可以将其提取到一个单独的 JS 文件中（称为 “Composable” 或 “Hook”），在多个组件中复用。

实战思路：一个待办事项（Todo List）应用

现在，让我们结合所学，构思一个经典的 Todo List 项目的实现。

  1. 项目结构:

    • App.vue: 根组件，包含整体布局。
    • components/TodoInput.vue: 用于输入新待办事项的组件。
    • components/TodoList.vue: 用于展示待办事项列表的组件。
    • components/TodoItem.vue: 单个待办事项的组件，包含文本和完成/删除按钮。
    • stores/todo.js: 使用 Pinia 管理所有的待办事项数据。

  2. 数据流:

    • 状态管理 (Pinia): 在 stores/todo.js 中定义一个 todoStore。state 包含一个 todos 数组。actions 包含 addTodo, removeTodo, toggleTodo 等方法。
    • TodoInput.vue: 包含一个输入框和一个“添加”按钮。当用户点击按钮时，调用 todoStore 的 addTodo action。
    • TodoList.vue: 从 todoStore 获取 todos 数组，并使用 v-for 循环渲染 TodoItem 组件。将每个 todo 对象通过 props 传递给 TodoItem。
    • TodoItem.vue: 接收一个 todo prop。当用户点击“完成”或“删除”按钮时，它会调用 todoStore 中对应的 toggleTodo 或 removeTodo action，并传入 todo.id。

由于 Pinia 的存在，组件之间不再需要复杂的事件传递。任何组件都可以直接与 todoStore 交互来读取或修改数据，整个应用的数据流变得清晰且易于管理。

结语

从一个简单的 HTML 文件到构建一个功能完备、结构清晰的现代化应用，Vue.js 为我们提供了一条平滑而强大的路径。它始于简单，却不止于简单。

我们已经走过了 Vue 的核心概念、组件化开发、强大的生态工具，并接触了更现代的 Composition API。这篇长文为你铺设了坚实的基础，但真正的精通源于不断的实践。现在，是时候关掉这篇文章，打开你的代码编辑器，用 npm create vue@latest 开启你的第一个 Vue 项目了。去构建、去创造、去解决问题，你会发现，Vue 的世界远比你想象的更加精彩。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部