Vue 入门教程：新手快速上手指南 – wiki基地

作者： /

Vue.js 入门教程：新手快速上手指南

欢迎来到 Vue.js 的世界！如果你是前端开发新手，或者厌倦了繁琐的 DOM 操作，希望找到一个更高效、更具组织性的方式来构建用户界面，那么 Vue.js 绝对是一个值得学习的框架。

本教程将带你从零开始，一步步了解 Vue 的核心概念，并通过简单的示例快速构建你的第一个 Vue 应用。无论你的最终目标是构建复杂的单页应用（SPA），还是仅仅想为现有网站添加一些交互功能，Vue 都能胜任。

本文目标：

  • 理解 Vue.js 是什么以及它为什么如此受欢迎。
  • 掌握 Vue.js 的基本用法，包括数据绑定、指令、事件处理等。
  • 了解 Vue 组件的概念。
  • 指导你如何进一步学习和实践 Vue。

让我们开始吧！

第一章：初识 Vue.js

1.1 什么是 Vue.js？

Vue.js（通常简称为 Vue）是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。这意味着你可以只使用 Vue 的核心库来为现有项目添加交互功能，也可以使用它来构建复杂的单页应用。

渐进式 是 Vue 的一个重要特性。它意味着你可以根据项目的需求和规模，逐步引入 Vue 的更多功能和生态系统工具（如路由、状态管理、构建工具等）。

1.2 为什么选择 Vue.js？

Vue 在前端社区中迅速崛起并广受欢迎，主要得益于以下几个优点：

  • 易学易用： Vue 的 API 设计简洁直观，文档清晰易懂，对于有 HTML、CSS 和 JavaScript 基础的开发者来说，上手非常快。
  • 灵活： Vue 不强制你使用特定的技术栈，你可以将它集成到任何现有的项目。
  • 高效： Vue 提供了响应式的数据绑定和虚拟 DOM，能够高效地更新视图，提供良好的性能。
  • 组件化： Vue 鼓励使用组件化的方式构建应用，这让代码更易于维护、复用和管理。
  • 完善的生态系统： Vue 拥有强大的官方库（如 Vue Router 用于路由，Vuex/Pinia 用于状态管理）和丰富的社区支持。
  • 良好的文档： Vue 的官方文档被认为是业界顶级的，详细且全面。

1.3 准备工作：你需要什么？

在开始学习 Vue 之前，你需要掌握以下基础知识：

  • HTML 和 CSS： 了解网页结构和样式。
  • JavaScript： 熟悉基本的 JavaScript 语法、变量、函数、对象、数组等。理解 DOM 操作会有帮助，但 Vue 的出现正是为了减少直接的 DOM 操作。
  • （可选但推荐）ES6+： 了解 ES6（ECMAScript 2015）或更高版本的 JavaScript 新特性，如箭头函数、let、const、模块等，会让你写出更现代、更清晰的代码。

你不需要安装任何复杂的工具链，只需要一个现代浏览器（如 Chrome、Firefox、Edge）和一个文本编辑器（如 VS Code、Sublime Text、Atom）。

第二章：快速上手：引入 Vue

Vue 提供了多种使用方式，对于新手来说，最简单的方式是通过 <script> 标签直接引入。

2.1 使用 <script> 标签引入 Vue

创建一个简单的 HTML 文件（例如 index.html）：

“`html






我的第一个 Vue 应用




{{ message }}


“`

将上述代码保存为 index.html，用浏览器打开它。你会看到页面上只显示 {{ message }}。这是因为我们还没有初始化 Vue 实例来控制这个区域。

解释：

  • <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">：这行代码从 CDN（内容分发网络）加载了 Vue 的开发版本。开发版本包含了更多的警告和调试信息，适合学习和开发阶段使用。生产环境应使用体积更小的生产版本。
  • <div id="app">: 这是一个普通的 HTML 元素，我们将在后续的 JavaScript 代码中告诉 Vue 来控制这个元素内的内容。id="app" 是一个常见的命名习惯，但你可以使用任何合法的 ID。
  • {{ message }}：这是 Vue 的“插值”语法，用于显示数据。Vue 会将 message 替换为我们在 Vue 实例中定义的数据。

2.2 创建你的第一个 Vue 实例

现在，我们在 <body> 标签末尾的 <script> 标签中添加 JavaScript 代码来创建 Vue 实例：

“`html






我的第一个 Vue 应用


{{ message }}


“`

保存并刷新 index.html。现在，你会看到页面上显示的是 Hello, Vue!。

解释：

  • new Vue({...})：这是创建 Vue 实例的语法。所有 Vue 应用都是通过创建新的 Vue 实例来启动的。
  • el: '#app'：el 是 element 的缩写。这个选项指定了 Vue 实例将要挂载（mount）的 DOM 元素。在这里，Vue 将会控制 ID 为 app 的 div 及其内部的所有内容。
  • data: {...}：data 选项是一个对象，用于存储 Vue 实例的数据。data 中的属性（例如 message）是“响应式”的。这意味着当 message 的值发生变化时，所有使用了 message 的地方（比如 {{ message }} 插值）都会自动更新，视图会自动重新渲染。

恭喜！你已经成功创建并运行了你的第一个 Vue 应用。虽然非常简单，但这已经展示了 Vue 的核心特性：声明式渲染和响应式数据绑定。

第三章：Vue 的核心概念

接下来，我们将深入了解 Vue 的一些核心概念。

3.1 数据绑定

我们已经在上面的例子中看到了插值语法 {{ }}，这是最基本的数据绑定方式。Vue 提供了更强大的方式来绑定 HTML 属性、处理用户输入等。

3.1.1 插值 {{ }}

用于文本内容的数据绑定。你可以在双大括号中放入任何 JavaScript 表达式，结果会被渲染到 DOM 中：

“`html

消息：{{ message }}

计算结果：{{ number * 2 }}

三元表达式：{{ isVisible ? ‘可见’ : ‘隐藏’ }}

“`

3.1.2 属性绑定 v-bind

有时我们需要动态地绑定 HTML 元素的属性，例如 src、href、class、style 等。这时就需要使用 v-bind 指令。

“`html

鼠标悬停在我上面看看


访问 Vue 官网

动态类名

动态样式

“`

v-bind 的缩写： v-bind 指令有一个常用的缩写：:。例如：

  • v-bind:href="linkUrl" 可以写成 :href="linkUrl"
  • v-bind:class="{ ... }" 可以写成 :class="{ ... }"
  • v-bind:style="{ ... }" 可以写成 :style="{ ... }"

在实际开发中，你几乎总是会使用缩写形式。

3.1.3 双向数据绑定 v-model

v-model 指令主要用于表单元素（<input>、<textarea>、<select>）上，实现表单输入和应用状态之间的双向绑定。这意味着当用户在输入框中输入内容时，对应的 Vue 数据会自动更新；反之，当 Vue 数据发生变化时，输入框中的内容也会更新。

“`html

你输入的内容是：{{ name }}

描述：{{ description }}

你选择的是：{{ selected }}

“`

解释： 当你在输入框中输入时，name 数据会立即更新，并且显示 name 的 {{ name }} 也会随之更新。

3.2 条件渲染 v-if, v-else-if, v-else, v-show

Vue 提供了指令来根据条件控制元素的显示与隐藏。

  • v-if：根据表达式的布尔值来决定是否渲染元素。如果条件为假，元素及其内部的内容会被销毁。
  • v-else-if 和 v-else：与 v-if 配合使用，提供“否则”和“否则如果”的条件分支。
  • v-show：根据表达式的布尔值来决定元素的显示与隐藏。如果条件为假，元素仍然存在于 DOM 中，只是通过 CSS display 属性被隐藏。

v-if vs v-show：

  • v-if 是“真正”的条件渲染，如果在初始渲染时条件为假，则什么也不做，只有当条件第一次变为真时，才会开始渲染条件块。切换开销较大。
  • v-show 则总是渲染元素，只是简单地通过 CSS 进行切换。初始渲染开销较大，但切换开销较小。
  • 选择哪个取决于你的需求：如果需要频繁切换显示/隐藏，使用 v-show；如果条件不经常改变，或者需要在条件为假时完全移除元素，使用 v-if。

“`html

这条消息使用 v-if 显示

这条消息使用 v-else 显示

这条消息使用 v-show 显示

Type A
Type B
Other Type

“`

3.3 列表渲染 v-for

v-for 指令用于循环渲染列表。它可以迭代数组、对象或数字。

“`html

  • {{ index }} – {{ item.text }}

  • {{ index }} – {{ key }}: {{ value }}

  • {{ n }}

“`

key 的重要性：

当你使用 v-for 时，总是建议为每个列表项提供一个唯一的 key 属性。key 的值可以是字符串或数字。Vue 会根据 key 来跟踪每个节点的身份，从而高效地复用和重新排序现有元素，而不是从头开始渲染。这对于提高性能非常重要，尤其是在处理动态列表时。理想情况下，key 应该是一个唯一的 ID，而不是索引。

3.4 事件处理 v-on

v-on 指令用于监听 DOM 事件，并在事件触发时执行 JavaScript 代码或 Vue 实例中的方法。

“`html






访问 Vue 官网 (阻止默认跳转)

“`

v-on 的缩写： v-on 指令有一个常用的缩写：@。例如：

  • v-on:click="handler" 可以写成 @click="handler"
  • v-on:submit.prevent="onSubmit" 可以写成 @submit.prevent="onSubmit"

在实际开发中，你几乎总是会使用缩写形式。

常用的事件修饰符：

  • .stop：阻止事件冒泡。
  • .prevent：阻止默认事件（例如阻止链接跳转或表单提交）。
  • .capture：使用捕获模式添加事件监听器。
  • .self：只当事件在该元素本身触发时才触发处理函数。
  • .once：事件只触发一次。
  • .passive：提高移动端滚动的性能。

3.5 计算属性 Computed Properties

当你的模板中包含复杂的逻辑时，使用计算属性 (computed) 是一个更好的选择。计算属性是基于它们的响应式依赖进行缓存的。只有当相关联的响应式数据发生变化时，才会重新求值。

这比直接在模板中使用复杂表达式或在 methods 中定义函数有以下优点：

  1. 更清晰的模板： 逻辑从模板中分离，模板更易读。
  2. 缓存： 计算属性会缓存结果。只要依赖不变，多次访问计算属性会立即返回之前计算好的结果，而不需要重复执行函数。
  3. 可读性： 计算属性通常有更具描述性的名称。

“`html

原始字符串：{{ message }}

翻转字符串（计算属性）：{{ reversedMessage }}

翻转字符串（方法）：{{ reverseMessageMethod() }}

“`

打开浏览器的开发者工具，观察控制台输出。你会发现：

  • 当你加载页面时，两个都会执行（首次渲染）。
  • 如果你修改 message 数据，两个都会重新执行。
  • 但是，如果你没有修改 message，只是访问 reversedMessage 多次，计算属性正在重新计算... 只会输出一次（因为结果被缓存了）。而每次访问 reverseMessageMethod()，方法正在执行... 都会输出。

这说明了计算属性的缓存优势。对于需要进行复杂计算并依赖于响应式数据的场景，计算属性是首选。

3.6 监听器 Watchers (了解即可)

虽然计算属性在处理依赖于响应式数据的逻辑时非常强大，但有时你可能需要在某个数据发生变化时执行异步操作或更复杂的“副作用”。这时可以使用监听器 (watch)。

计算属性是声明式的：你声明一个计算属性依赖于哪些数据，Vue 会自动跟踪并在依赖变化时更新。

监听器是命令式的：你需要明确地指定要监听哪个数据，以及当它变化时执行什么逻辑。

对于初学者，通常计算属性已经足够应对大部分场景。这里简单展示一个监听器的例子：

“`html

请输入一个问题：

{{ answer }}

“`

这个例子展示了如何使用 watch 来监听 question 数据，并在它变化时执行 getAnswer 方法（这里使用了简单的延迟模拟异步）。相比计算属性，watch 更适合处理需要执行副作用（如网络请求、修改 DOM 等）的场景。

第四章：组件化入门

组件是 Vue 最强大的特性之一。它们允许你将大型应用分割成独立、可复用的小型模块（组件）。每个组件都有自己的 HTML 结构、样式和逻辑。

4.1 全局组件注册

最简单的组件注册方式是全局注册。一旦全局注册，你就可以在任何 Vue 实例的模板中使用这个组件。

“`html



“`

解释：

  • Vue.component('button-counter', {...})：全局注册了一个名为 button-counter 的新组件。第一个参数是组件的标签名（在模板中使用），第二个参数是组件的选项对象。
  • data: function() { ... }：重要！ 组件的 data 选项必须是一个函数，并且返回一个对象。这样做是为了保证每个组件实例拥有独立的 data 副本，避免数据共享和相互影响。
  • template: \…“：组件的模板，定义了组件的 HTML 结构。可以使用插值和指令。
  • 在 Vue 实例的模板中，可以直接使用 <button-counter></button-counter> 标签来使用这个组件。

在这个例子中，三个 <button-counter> 标签都使用了同一个组件定义，但它们各自维护独立的 count 数据。点击一个按钮不会影响其他按钮的计数。

4.2 组件间的通信（简介）

在实际应用中，组件通常需要相互通信。最常见的两种通信方式是：

  • 父组件向子组件传递数据： 通过 props (属性)。
  • 子组件向父组件发送消息： 通过自定义事件 $emit。

组件通信是一个比较重要的主题，在本入门教程中暂不深入讲解，但你需要知道组件不是孤立的，它们可以相互协作。

第五章：进阶之路（了解）

通过上面的学习，你已经掌握了 Vue 的核心基础。但这只是冰山一角。对于更复杂的应用，你会需要 Vue 的生态系统。

5.1 Vue CLI 和单文件组件 (.vue)

对于大型项目，直接使用 <script> 标签的方式会变得难以管理。Vue 提供了一个官方的脚手架工具 Vue CLI，它可以帮助你快速搭建项目，并集成了 Webpack 或 Vite 等构建工具。

Vue CLI 最大的优点是支持单文件组件 (Single-File Components, SFC)。一个 .vue 文件通常包含三个部分：

“`vue

“`

单文件组件将模板、脚本和样式集中在一个文件，提高了可维护性。Vue CLI 会处理 .vue 文件的编译工作。

安装 Vue CLI (需要 Node.js 和 npm/yarn)：

“`bash
npm install -g @vue/cli

或 yarn global add @vue/cli

“`

创建一个新项目：

bash
vue create my-vue-app
cd my-vue-app
npm run serve # 或 yarn serve

Vue CLI 是现代 Vue 开发的标准方式。

5.2 Vue Router

如果你的应用需要多个页面，并在这些页面之间进行导航（比如首页、关于我们、产品详情页），你需要使用 Vue Router，这是 Vue 的官方路由库，用于构建单页应用 (SPA)。

5.3 状态管理 (Vuex / Pinia)

在大型应用中，多个组件可能需要共享和管理一些公共数据。这时，Vuex（Vue 2 的官方状态管理库）或 Pinia（Vue 3 的官方状态管理库，也兼容 Vue 2 的 Composition API）就派上用场了。它们提供了一个集中式的存储来管理所有组件的状态。

5.4 其他

Vue 生态系统还包括 Devtools (浏览器开发者工具插件，用于调试 Vue 应用)、Vite (新一代构建工具，比 Webpack 更快) 等等。

第六章：学习资源与建议

  • Vue 官方文档： 这是最好的学习资源，详细、全面、更新及时。强烈推荐仔细阅读。 https://cn.vuejs.org/
  • Vue 官方教程： 文档中包含一个交互式的教程，非常适合新手。
  • Vue Router 和 Pinia/Vuex 官方文档： 当你需要路由和状态管理时，参考它们的官方文档。
  • 在线课程和社区： 许多平台提供 Vue 课程。加入 Vue 相关的社区、论坛、GitHub 项目，与其他开发者交流，寻求帮助。
  • 实践： 最重要的学习方式是实践。从小项目开始，尝试将你学到的概念应用到实际中。可以尝试重构一些简单的静态页面，或者构建一个待办事项列表应用。
  • 阅读源码或优秀的开源项目： 当你对 Vue 有一定了解后，阅读优秀的 Vue 开源项目可以帮助你学习最佳实践和高级技巧。
  • 使用 Vue Devtools： 安装浏览器扩展（Chrome 或 Firefox），它可以帮助你检查组件树、数据、路由等，非常方便调试。

结论

恭喜你完成了本入门教程！你已经掌握了 Vue.js 的核心概念，包括：

  • 如何创建 Vue 实例并挂载到 DOM。
  • 响应式数据绑定 ({{ }}, v-bind, v-model)。
  • 条件渲染 (v-if, v-show)。
  • 列表渲染 (v-for)。
  • 事件处理 (v-on)。
  • 计算属性 (computed)。
  • 组件化的基本概念。

Vue.js 是一个功能强大且易于学习的框架。通过本教程的学习，你已经为构建更复杂的现代前端应用打下了坚实的基础。

记住，编程学习是一个持续的过程。不断练习、探索新的概念和工具，并积极参与社区。

祝你在 Vue.js 的学习旅程中一切顺利！现在，动手开始构建你的第一个 Vue 应用吧！

注意： 本教程主要基于 Vue 2.x 的语法进行讲解，因为其基础概念更适合新手入门。Vue 3.x 引入了 Composition API 等新特性，更加强大和灵活，是未来发展方向。当你熟悉了 Vue 2 的基础后，可以很方便地迁移或学习 Vue 3 的 Composition API。官方文档同时提供了 Vue 2 和 Vue 3 的版本，你可以根据需要切换。对于新手，从 Vue 2 的 Option API 开始学起是一个不错的选择，因为它概念更集中，易于理解。

发表评论

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

滚动至顶部