Vue.js 基础入门教程 – wiki基地

作者： /

Vue.js 基础入门教程：迈出前端开发的第一步

欢迎来到 Vue.js 的世界！如果你是前端开发的初学者，或者对构建现代化的用户界面充满好奇，那么 Vue.js 是一个非常棒的起点。Vue.js 是一个渐进式 JavaScript 框架，这意味着你可以逐步地将它引入你的项目，从一个小小的交互功能到构建一个完整的单页面应用（SPA）。

本教程将带你从零开始，详细了解 Vue.js 的核心概念、基本语法以及如何构建简单的应用。让我们一起开启这段学习旅程吧！

什么是 Vue.js？为什么选择它？

Vue.js（发音为 /vjuː/, 类似于 view）是一个用于构建用户界面的渐进式框架。它的设计目标是从底层向上逐层应用，可以非常方便地集成到现有项目中。它也完全有能力驱动复杂的单页应用。

为什么选择 Vue.js？

  1. 易学易用： Vue.js 的 API 设计简洁直观，文档详尽且友好，即使是初学者也能快速上手。
  2. 渐进式： 你可以在项目中只使用 Vue 的核心部分（例如，仅仅处理 DOM 交互），或者逐步引入更多功能（如路由、状态管理），最终构建一个复杂的应用。这种灵活性使得 Vue 非常适合各种规模的项目。
  3. 性能优秀： Vue.js 使用虚拟 DOM（Virtual DOM）技术，能够高效地更新视图。其核心库只关注视图层，非常轻量。
  4. 生态系统完善： Vue.js 拥有庞大的社区和丰富的配套库，如 Vue Router（路由）、Vuex（状态管理，Vue 3 中是 Pinia）、Vue CLI/Vite（项目构建工具）、Devtools 浏览器扩展等，可以帮助你快速构建大型应用。
  5. 灵活： Vue.js 不限制你如何组织代码，你可以使用基于选项 API 或组合式 API (Vue 3+) 来编写组件，也可以在 HTML 中直接使用模板语法，或者使用 JSX/TSX。

总而言之，Vue.js 是一个兼具易用性、灵活性和高性能的现代前端框架，非常适合入门和构建各种规模的应用。

准备工作：运行你的第一个 Vue 应用

学习任何编程技术，最快的方式就是动手实践。我们先来搭建一个最简单的 Vue 环境。

你有几种方式来使用 Vue：

  1. CDN (内容分发网络): 这是最简单的方式，只需在 HTML 文件中引入一个 <script> 标签即可。适合快速原型开发或集成到现有静态页面。
  2. NPM/Yarn/pnpm: 对于构建更大型、更结构化的应用，推荐使用包管理器安装 Vue，配合现代构建工具（如 Vite 或 Vue CLI）。

对于入门，我们先使用 CDN 的方式。

创建一个 index.html 文件，并粘贴以下内容：

“`html






Vue.js 入门

{{ message }}




“`

用浏览器打开这个 index.html 文件。你应该能看到页面上显示 “Hello, Vue!”。

恭喜你！你已经成功运行了你的第一个 Vue 应用。虽然它非常简单，但它包含了 Vue 应用的几个核心概念。

Vue 实例 (Vue Instance) – 应用的基石

每个 Vue 应用都是通过创建一个新的 Vue 实例 开始的。在上面的例子中，var app = new Vue({...}) 就是创建了一个 Vue 实例。

当我们创建一个 Vue 实例时，需要向其传递一个 选项对象 (Options Object)。这个对象包含了一些用于配置 Vue 实例的属性，最常用的包括：

  • el: 用于指定 Vue 实例挂载（mount）到哪个 DOM 元素上。可以是 CSS 选择器字符串，或者一个 DOM 元素对象。一旦挂载成功，Vue 实例将完全控制该 DOM 元素及其子元素。
  • data: 一个对象，用来存储 Vue 实例需要管理的数据。这些数据是 响应式 的。当 data 中的数据发生变化时，Vue 会自动更新视图中使用了这些数据的地方。
  • methods: 一个对象，包含了 Vue 实例可以使用的方法。通常用于处理用户交互（如点击事件）。
  • computed: 一个对象，定义计算属性。计算属性是基于 data 中的数据计算而得的值，它们会缓存结果，只在依赖的数据变化时重新计算。
  • watch: 一个对象，用于观察 data 中某个数据的变化，并在数据变化时执行相应的函数。

还有其他一些高级选项，我们将在后面的教程中逐步了解。

数据绑定与模板语法 (Data Binding & Template Syntax)

在上面的例子中，我们在 HTML 中写了 {{ message }}。这是 Vue.js 的 文本插值 语法，也称为“Mustache”语法（因为看起来像胡子）。

{{ ... }} 会将 Vue 实例 data 中的同名属性的值显示在对应的位置。更重要的是，这种绑定是 响应式 的。

什么是响应式？

响应式是 Vue.js 最核心的特性之一。当你改变 Vue 实例 data 中的数据时，所有用到这些数据的视图都会自动更新。你不需要手动去操作 DOM 来改变文本、元素的属性或样式，Vue 会帮你完成这一切。

你可以通过浏览器开发者的控制台来测试这一点。打开 index.html 页面，按下 F12 打开开发者工具，切换到 Console（控制台）标签页，然后输入：

javascript
app.message = '你好，Vue!'

按下回车。你会立即看到页面上的文本从 “Hello, Vue!” 变成了 “你好，Vue!”。这就是 Vue 响应式系统的魔力！

除了文本插值 {{ }}，Vue 还提供了丰富的模板语法来处理更复杂的情况，主要是通过 指令 (Directives) 来实现。

指令 (Directives)

指令是带有 v- 前缀的特殊属性。它们作用于 HTML 元素，用于在元素上应用特殊的响应式行为。指令的职责是当表达式的值改变时，相应地更新 DOM。

我们来看一些最常用的指令：

1. v-bind: 动态绑定属性

v-bind 用于动态地绑定一个或多个 HTML 属性，或者一个组件 prop 到表达式。

语法:

  • 完整语法：v-bind:attribute-name="expression"
  • 缩写：:attribute-name="expression" (推荐使用缩写)

示例: 绑定图片的 src 属性

修改 index.html 的 <div id="app"> 部分和 script 部分：

“`html

{{ greeting }}

Vue Logo

Vue 官方网站

“`

现在，图片和链接的 src 和 href 属性将由 Vue 实例的 data 中的值控制。如果你在控制台改变 app.imageUrl 或 app.linkUrl，页面上的图片或链接也会相应更新。

v-bind 还可以用于动态绑定 class 和 style：

绑定 Class:

“`html

动态 Class 示例

“`

这里，:class 绑定了一个对象。对象的 key 是 class 名称，value 是一个布尔值。如果布尔值为 true，则该 class 会被添加；如果为 false，则会被移除。

你也可以绑定一个数组：:class="[activeClass, errorClass]"。

绑定 Style:

“`html

动态 Style 示例

“`

:style 绑定一个对象，key 是 CSS 属性名（可以使用驼峰命名或 kebab-case，如 fontSize 或 'font-size'），value 是属性值。

2. v-on: 监听 DOM 事件

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

语法:

  • 完整语法：v-on:event-name="expression"
  • 缩写：@event-name="expression" (推荐使用缩写)

示例: 点击按钮时改变文本

修改 index.html 的 <div id="app"> 部分和 script 部分：

“`html

{{ message }}



“`

点击第一个按钮会调用 Vue 实例 methods 中的 changeMessage 方法，该方法修改了 data 中的 message。点击第二个按钮则直接在模板内执行了简单的表达式 message = '文本已直接修改!'。

在方法中，你可以通过 this 关键字访问到 Vue 实例的 data 属性、computed 属性以及其他 methods。

事件修饰符:

Vue 提供了事件修饰符来处理一些常见的 DOM 事件行为，例如阻止事件冒泡、阻止默认行为等。修饰符通过 . 连接到事件名称后面。

  • .stop: 阻止事件冒泡 (Equivalent to event.stopPropagation()).
  • .prevent: 阻止默认行为 (Equivalent to event.preventDefault()).
  • .capture: 使用捕获模式监听事件。
  • .self: 只当事件从侦听器绑定的元素本身触发时才触发回调。
  • .once: 事件将只会触发一次。
  • .passive: 提高移动端滚动性能。

示例：

“`html
点击我 (阻止默认跳转)

“`

3. v-model: 实现表单输入和应用状态之间的双向绑定

v-model 指令用于在表单输入元素或组件上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上是 v-bind:value 和 v-on:input 的语法糖。

语法: v-model="dataProperty"

示例: 输入框与文本的双向绑定

“`html

输入框的值: {{ inputValue }}


多行文本输入框的值: {{ textareaValue }}


复选框选中状态: {{ checkboxValue }}


单选框选中值: {{ radioValue }}

男
女

下拉列表选中值: {{ selectValue }}

“`

在上面的例子中，当你修改 <input>、<textarea>、<checkbox>、<radio> 或 <select> 的值时，对应的 Vue 实例 data 中的属性会自动更新；反之，如果你在代码中改变 data 中的属性值，表单元素的值也会自动更新。这就是双向绑定。

修饰符:

  • .lazy: 将同步输入改为在 change 事件之后更新数据，而不是 input 事件。
  • .number: 将用户的输入值自动转为数值类型。
  • .trim: 自动过滤用户输入的首尾空白字符。

4. 条件渲染 (Conditional Rendering) – v-if, v-else-if, v-else, v-show

这些指令用于根据条件决定是否渲染或显示元素。

  • v-if: 条件为真时才渲染元素。如果条件为假，元素会被完全移除出 DOM。
  • v-else-if: 用于 v-if 或 v-else-if 链式判断，必须紧跟在前一个 v-if 或 v-else-if 之后。
  • v-else: 用于 v-if 或 v-else-if 链式判断，表示当所有前面的条件都不为真时渲染。必须紧跟在前一个 v-if 或 v-else-if 之后。
  • v-show: 条件为真时显示元素。如果条件为假，元素仍然会被渲染到 DOM 中，但会通过 CSS display: none; 被隐藏。

示例:

“`html

欢迎回来，用户！

请登录。

Type A
Type B
Type C
Other Type

我使用 v-show 控制显示/隐藏。

“`

v-if vs v-show:

  • v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当被销毁和重建。开销较高（销毁/重建）。
  • v-show 只是简单地基于 CSS display 属性进行切换。初始渲染开销较高，但切换开销较低。

选择建议:

  • 如果需要频繁地切换元素的显示/隐藏，使用 v-show 会更好，因为它避免了反复创建和销毁 DOM 元素的开销。
  • 如果条件不经常改变，或者需要在条件为假时完全移除元素以节省资源，使用 v-if 更合适。

5. 列表渲染 (List Rendering) – v-for

v-for 指令用于基于源数据多次渲染元素或模板块。它使用 item in items 或 (item, index) in items 的特殊语法，其中 items 是源数组，item 是当前迭代的数组元素，index 是当前元素的索引（可选）。

语法:

  • v-for="item in items"
  • v-for="(item, index) in items"
  • v-for="(value, key, index) in object" (用于遍历对象)

示例: 渲染一个列表

“`html

水果列表

  • {{ fruit.name }}

用户列表 (带索引)

  • {{ index }} – {{ user.name }} (年龄: {{ user.age }})

对象属性列表

  • {{ key }}: {{ value }}

“`

key 的重要性:

在使用 v-for 进行列表渲染时，强烈建议为每个列表项提供一个唯一的 key 属性。Vue 会利用 key 来跟踪每个节点的身份，从而能够高效地复用和重新排序现有元素，而不是从头开始渲染。这对于保持组件状态、提高性能非常重要。

理想的 key 值是每个列表项数据的唯一标识符（例如数据库 ID）。避免使用索引 index 作为 key，尤其是在列表项顺序可能会改变的情况下（如排序、过滤、添加/删除项），因为这可能导致性能问题和错误的状态更新。

计算属性 (Computed Properties) 与 方法 (Methods)

在 Vue 实例中，你可以使用 computed 属性和 methods 来处理逻辑和数据。它们都可以用来计算或返回数据，但用法和目的有所不同。

方法 (Methods):

methods 是定义在 Vue 实例上的函数。它们通常用于响应事件或手动调用。每次调用 methods 中的方法时，函数都会重新执行。

示例:

“`html

原始文本: {{ rawText }}

通过方法处理的文本: {{ processTextMethod() }}


“`

每次访问 processTextMethod() 时，函数都会被执行。点击按钮会调用 showMessage 方法。

计算属性 (Computed Properties):

computed 属性是基于其依赖的响应式数据缓存的属性。只有当计算属性依赖的数据发生变化时，它才会重新计算。如果依赖的数据没有改变，重复访问计算属性会立即返回之前缓存的结果，而不会重新执行函数。

示例:

“`html

姓: {{ firstName }}

名: {{ lastName }}

全名 (通过计算属性): {{ fullName }}

“`

打开控制台，你会看到 “fullName 计算属性被重新计算” 的输出只在页面加载时出现一次。然后在控制台输入 app.firstName = '李' 或 app.lastName = '四'，你会看到计算属性重新计算并更新了页面上的全名。但如果你反复访问 app.fullName 或 app.firstName 而不改变它的值，fullName 计算属性的函数不会再次执行，直接返回缓存值。

Methods vs Computed Properties 总结:

  • 目的: computed 用于计算并返回一个基于现有数据的新值（通常用于显示）；methods 用于执行某个行为或逻辑（通常用于响应事件或手动调用）。
  • 缓存: computed 有缓存，只在依赖变化时重新计算；methods 没有缓存，每次调用都执行。
  • 用法: 在模板中访问 computed 属性时像访问 data 属性一样（不加括号）；调用 methods 方法时需要加括号。
  • 依赖: computed 依赖于响应式数据，其结果会随着数据的变化自动更新；methods 不一定依赖响应式数据，它的执行是手动的。

对于复杂的计算或数据转换，优先使用 computed 属性，因为它具有缓存，性能更好。只有在需要执行某个动作（如处理点击事件、提交表单）时，才使用 methods。

组件化 (Components) – 构建可复用的 UI

构建大型应用时，将界面拆分成独立、可复用的小模块是非常重要的。在 Vue 中，这些模块称为 组件 (Components)。

组件是 Vue 应用的基石。它们是可复用的 Vue 实例，通常包含自己的模板、脚本逻辑和样式。

全局注册组件:

可以使用 Vue.component() 方法全局注册组件。注册后，可以在任何 Vue 实例的模板中使用该组件。

javascript
// 全局注册一个名为 'my-component' 的组件
Vue.component('my-component', {
template: '<div>这是一个全局注册的组件!</div>' // 组件的模板
});

然后，在你的 Vue 实例模板中使用它：

“`html

全局组件示例


“`

局部注册组件:

在实际开发中，更常用的是局部注册组件，在需要使用它的父组件的 components 选项中注册。

“`javascript
// 定义一个组件选项对象
var myComponentOptions = {
template: ‘

这是一个局部注册的组件!

‘
};

var app = new Vue({
el: ‘#app’,
data: {
// …
},
components: { // 在 components 选项中局部注册
‘local-component’: myComponentOptions
}
});
“`

然后在该 Vue 实例（这里是根实例）的模板中使用它：

“`html

局部组件示例

“`

组件的选项:

组件的选项对象和根 Vue 实例的选项对象类似，也可以有 data, methods, computed, watch 等。不同的是，组件的 data 必须是一个 函数，并返回一个新对象，以确保每个组件实例都有自己独立的数据副本。

javascript
Vue.component('counter-component', {
// data 必须是函数
data: function() {
return {
count: 0 // 每个组件实例的 count 都是独立的
};
},
template: `
<div>
<p>计数: {{ count }}</p>
<button @click="count++">增加计数</button>
</div>
`
});

组件之间的通信 (简述 Props):

组件通常需要相互通信。最常见的方式是通过 props 将数据从父组件传递给子组件。

  • props: 在子组件中声明接收父组件传递的数据。子组件不能直接修改 props，因为这会违反单向数据流原则。

javascript
// 父组件
var app = new Vue({
el: '#app',
data: {
parentMessage: '来自父组件的消息'
},
components: {
'child-component': {
props: ['message'], // 子组件通过 props 选项接收数据
template: '<p>子组件收到消息: {{ message }}</p>'
}
}
});

“`html

父子组件通信示例

“`

我们会在后续教程中更详细地介绍组件通信（包括事件传递从子到父）。

生命周期钩子 (Lifecycle Hooks)

每个 Vue 实例在创建时都经历一系列的初始化步骤，例如设置数据观察、编译模板、将实例挂载到 DOM、更新 DOM 等。同时，它也会运行一些叫做 生命周期钩子函数 (Lifecycle Hooks) 的函数。

这些钩子函数允许你在实例生命周期的特定阶段执行自己的代码。最常用的钩子包括：

  • beforeCreate: 实例刚刚创建，但数据和事件监听尚未初始化。
  • created: 实例已经创建，数据观察已设置，计算属性和方法已初始化。但 DOM 尚未生成。你可以在这里访问 data 和 methods，通常用于数据获取。
  • beforeMount: 在挂载开始之前被调用，相关的 render 函数首次被调用。
  • mounted: 实例已经被挂载到 DOM 上。你可以在这里执行需要访问 DOM 的操作（如集成第三方库、执行动画）。
  • beforeUpdate: 数据更新时调用，发生在虚拟 DOM 打补丁之前。
  • updated: DOM 更新完成时调用。
  • beforeDestroy (Vue 2) / beforeUnmount (Vue 3): 实例销毁之前调用。
  • destroyed (Vue 2) / unmounted (Vue 3): 实例销毁之后调用。所有子实例都被销毁，事件监听器被移除。

示例:

“`html

{{ message }}

“`

打开控制台，观察 Vue 实例创建过程中输出的日志。理解生命周期钩子能帮助你更好地在合适的时机执行逻辑，例如在 created 中初始化数据，在 mounted 中操作 DOM 或集成第三方库。

进阶之路：使用现代构建工具 (Modern Setup)

虽然使用 CDN 引入 Vue 很适合学习和小型项目，但在构建更大型、更复杂的应用时，我们通常会使用现代前端构建工具。

  • 单文件组件 (Single-File Components – SFC): 这是 Vue 开发中最常用的方式。它允许你在一个 .vue 文件中包含一个组件的模板 (<template>), 脚本 (<script>), 和样式 (<style>)。这种方式使得组件更易于管理和维护。
  • 构建工具 (Build Tools): Vite 和 Vue CLI 是官方推荐的构建工具。
    • Vite: 一个现代化的前端构建工具，提供了闪电般的开发服务器启动速度和高效的构建。它基于浏览器原生的 ES Modules，开发体验非常好。是 Vue 3 的推荐构建工具。
    • Vue CLI: 较旧但功能强大的命令行工具，提供了一套完整的脚手架、构建和管理工具。它基于 Webpack。

使用这些工具，你可以：

  • 使用单文件组件 (.vue 文件)。
  • 利用 CSS 预处理器 (如 Sass, Less) 和后处理器 (如 PostCSS)。
  • 使用 Babel 编译现代 JavaScript 语法。
  • 自动热重载，极大地提升开发效率。
  • 打包优化代码，生成可部署的静态资源。

入门阶段了解这些概念即可。当你对 Vue 的基础知识有了更深入的理解后，下一步就是学习如何使用 Vite 或 Vue CLI 来创建和开发项目。这将是构建更规范、更大型 Vue 应用的必经之路。

总结与下一步学习

恭喜你！你已经学习了 Vue.js 的基础知识，包括：

  • Vue 实例的创建和选项 (el, data, methods, computed)
  • 响应式数据的概念
  • 模板语法 (文本插值 {{ }} 和 指令 v-bind, v-on, v-model, v-if, v-show, v-for)
  • 计算属性与方法的区别和用法
  • 组件化的概念和基本用法
  • 生命周期钩子

这些是构建任何 Vue 应用的核心要素。现在，你已经具备了开始编写简单 Vue 应用的能力。

下一步学习建议:

  1. 大量实践: 通过编写更多的小例子来巩固你学到的知识。尝试构建一个简单的待办事项列表应用、一个计算器等。
  2. 深入组件: 学习如何更深入地使用组件，包括组件间的事件通信 ($emit)、插槽 (Slots) 来分发内容、动态组件等。
  3. 使用构建工具: 学习如何使用 Vite 或 Vue CLI 创建项目，并习惯使用单文件组件进行开发。
  4. Vue Router: 学习如何构建单页面应用 (SPA) 并处理页面路由。
  5. 状态管理: 学习如何使用 Pinia (Vue 3 推荐) 或 Vuex (Vue 2) 管理应用中复杂的共享状态。
  6. 发起 HTTP 请求: 学习如何在 Vue 应用中与后端 API 进行数据交互 (如使用 Axios 库)。
  7. 过渡与动画: 学习如何为元素的进入、离开和列表排序添加过渡和动画效果。
  8. 测试: 学习如何测试你的 Vue 组件。
  9. 深入响应式原理: 如果有兴趣，可以了解 Vue 的响应式系统是如何工作的。

Vue.js 的学习曲线相对平缓，但要精通并构建复杂的应用，还需要持续的学习和实践。

希望这篇详细的入门教程能为你打下坚实的基础。动手写代码是最好的学习方式，祝你在 Vue.js 的学习之路上取得成功！

发表评论

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

滚动至顶部