---

Vue.js 基础介绍：迈向现代前端开发的基石

引言：为什么选择 Vue.js？

在当今快速发展的 Web 开发领域，构建复杂、交互性强的用户界面已成为常态。原生 JavaScript 操作 DOM 变得日益繁琐和低效，尤其是在处理大量数据更新和页面状态变化时。为了应对这一挑战，各种前端框架应运而生，它们提供了一套系统化的方法来组织代码、管理状态并高效更新视图。

Vue.js (读音 /vjuː/, 类似于 view) 是一个渐进式 JavaScript 框架，用于构建用户界面。与其他大型框架（如 Angular）不同，Vue 被设计为可以自底向上逐层应用。这意味着你可以仅仅使用 Vue 的核心库来增强现有的 HTML，也可以将其作为一个完整的框架来构建单页应用 (Single-Page Application – SPA)。

Vue.js 之所以受到广泛欢迎，主要得益于以下几个方面：

1. 易学易用： Vue 的 API 设计简洁明了，文档详尽且质量很高。对于有 HTML、CSS 和 JavaScript 基础的开发者来说，上手非常快。
2. 渐进式： Vue 的核心库只关注视图层，你可以根据项目需求逐步引入其他库，如 Vue Router（路由管理）、Pinia/Vuex（状态管理）等。这使得 Vue 既适用于小型项目的部分功能增强，也能够胜任大型应用的开发。
3. 性能优秀： Vue 使用虚拟 DOM (Virtual DOM) 技术，配合优化策略，能够高效地更新页面，提供了良好的运行时性能。
4. 灵活性： Vue 提供了多种方式来实现相同的功能，允许开发者根据习惯和项目需求选择最合适的方式。
5. 生态系统完善： Vue 拥有一个活跃的社区，提供了大量的工具、库和插件，涵盖了开发的方方面面。

本文将带你深入了解 Vue.js 的基础知识，包括其核心概念、模板语法、数据绑定、指令、计算属性、侦听器以及组件等，为你的 Vue.js 学习之旅奠定坚实的基础。

一、初识 Vue 实例与声明式渲染

学习任何前端框架，第一步通常是创建一个应用实例，并将其与页面上的某个 DOM 元素关联起来。在 Vue 中，这个核心概念被称为 Vue 实例。

你可以通过 CDN 引入 Vue：

“`html

“`

在这个最简单的例子中，我们做了几件事：

1. 在 HTML 中定义了一个 id 为 app 的 div 元素，这是 Vue 实例将要挂载（控制）的区域。
2. 在 div 内部使用了双大括号语法 {{ message }}。这是 Vue 的文本插值语法，用于将数据对象中的 message 属性值渲染到页面上。
3. 创建了一个新的 Vue 实例：new Vue({...})。
   • el: '#app' 选项指定了 Vue 实例要挂载的 DOM 元素。Vue 将控制这个元素及其内部的所有内容。
   • data: { message: 'Hello, Vue!' } 选项定义了一个数据对象。Vue 会将这个对象中的所有属性注入到 Vue 实例中，并使它们具备响应性。

当我们打开这个 HTML 文件时，页面上会显示 “Hello, Vue!”。更重要的是，如果我们在浏览器的开发者工具中修改 app.message 的值，例如输入 app.message = 'Vue is amazing!'，你会发现页面上的文本会立即更新为 “Vue is amazing!”。这就是 Vue 的声明式渲染和数据响应性的魅力：你只需要声明数据和模板之间的关系，当数据发生变化时，Vue 会自动更新 DOM，而无需手动进行复杂的 DOM 操作。

Vue 实例是连接数据和视图的桥梁。通过 el 选项，它知道要控制哪个部分的 DOM；通过 data 选项，它获取了驱动视图所需的数据。这些 data 中的数据经过 Vue 的处理后，变得“响应式”，任何对这些数据的修改都会通知 Vue 去检查哪些地方依赖了这些数据，并只更新需要更新的 DOM 部分。

二、模板语法详解

除了文本插值 {{ }}，Vue 提供了一整套强大的模板语法，允许我们将数据绑定到 DOM 的各种属性、控制元素的显示与隐藏、处理用户事件等。Vue 的模板语法是基于 HTML 的扩展，因此非常容易理解和学习。

1. 文本插值 ({{ }})

这是最基本的用法，前面已介绍。它可以用来绑定文本内容。

“`html

{{ greeting }}, {{ name }}!

“`

对应的数据：

javascript
data: {
greeting: 'Hello',
name: 'World'
}

2. 绑定属性 (v-bind)

我们不仅可以将数据绑定到文本内容，还可以绑定到元素的属性，例如 id, class, href 等。这通过 v-bind 指令实现。

html
<a v-bind:href="url">链接</a>
<img v-bind:src="imgSrc" v-bind:alt="imgAlt">
<button v-bind:disabled="isButtonDisabled">按钮</button>

v-bind 有一个简洁的缩写形式：省略 v-bind:，直接使用 :。

html
<a :href="url">链接 (缩写)</a>
<img :src="imgSrc" :alt="imgAlt">
<button :disabled="isButtonDisabled">按钮 (缩写)</button>

数据：

javascript
data: {
url: 'https://vuejs.org',
imgSrc: 'path/to/image.jpg',
imgAlt: '一张图片',
isButtonDisabled: true
}

当 isButtonDisabled 的值变为 false 时，按钮的 disabled 属性就会被移除，按钮变为可点击状态。

3. 绑定 HTML (v-html)

如果你需要渲染包含 HTML 结构的字符串，可以使用 v-html 指令。请注意： 在网站上动态渲染任意的 HTML 是非常危险的，因为这容易导致 XSS 攻击。只在内容安全可靠时使用 v-html，永不对用户提交的内容使用 v-html。

“`html

“`

数据：

javascript
data: {
rawHtml: '<span style="color: red;">这段文字是红色的。</span>'
}

4. 绑定原始 HTML (v-pre)

v-pre 指令会跳过其元素和子元素的编译过程。这对于显示原始的 Mustache 标签（双大括号）或其他 Vue 语法非常有用，可以加快编译速度。

html
<span v-pre>{{ 这段文字不会被 Vue 编译 }}</span>

5. 仅渲染一次元素 (v-once)

v-once 指令用于只渲染元素和组件一次。随后的数据变化不会再引起该元素的更新。

html
<span v-once>这个消息: {{ message }}</span>

当 message 改变时，这个 span 的内容不会更新。

三、指令 (Directives) 详解

指令是带有 v- 前缀的特殊属性。指令的职责是当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。前面我们已经遇到了 v-bind 和 v-html，接下来我们看更多常用的内置指令。

1. 条件渲染 (v-if, v-else-if, v-else)

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

“`html

“`

数据：

javascript
data: {
awesome: true,
type: 'A'
}

v-if 是“真正”的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁与重建。当 v-if 的条件是 false 时，该元素及其子元素根本不会被渲染到 DOM 中。

2. 条件显示 (v-show)

另一个用于条件性显示元素的指令是 v-show。用法与 v-if 类似：

“`html

Hello!

“`

数据：

javascript
data: {
ok: true
}

v-show 只是简单地通过修改元素的 CSS display 属性来控制元素的显示与隐藏。无论初始条件如何，带有 v-show 的元素总会被渲染并保留在 DOM 中。

v-if vs v-show

• v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• v-show 则在初始渲染时就会渲染，只是基于 CSS 进行切换。

因此，如果需要频繁切换元素的显示与隐藏，使用 v-show 会更高效，因为它避免了反复创建和销毁 DOM 元素。如果条件不经常改变，或者在运行时不需要频繁切换，那么 v-if 可能是更好的选择，因为它只在必要时才渲染元素，从而节省了初始渲染的开销。

3. 列表渲染 (v-for)

v-for 指令用于遍历数组或对象，渲染一个元素列表。

遍历数组：

“`html

• {{ item.message }}

“`

数据：

javascript
data: {
items: [
{ id: 1, message: 'Foo' },
{ id: 2, message: 'Bar' }
]
}

v-for 表达式的语法是 item in items，其中 items 是源数据数组，item 是当前被遍历的元素。你可以选择性地获取当前项的索引：(item, index) in items。

“`html

• {{ index }} – {{ item.message }}

“`

key 的重要性

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序改变，Vue 不会移动 DOM 元素来匹配数据项的顺序，而是修改现有元素的属性和内容。这可能导致意外的行为，特别是在处理动态列表或含有表单输入框的列表时。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为 v-for 绑定一个唯一的 key 特殊属性。推荐使用列表项的唯一 ID 作为 key。如果没有 ID，可以使用索引，但索引不推荐作为 key，除非列表项不会改变顺序或进行增删操作。

遍历对象：

v-for 也可以遍历对象的属性。

“`html

• {{ index }}. {{ key }}: {{ value }}

“`

数据：

javascript
data: {
myObject: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}

遍历数字：

v-for 也可以遍历一个数字范围。

html
<span v-for="n in 10">{{ n }} </span>

这会渲染出数字 1 到 10。

4. 事件处理 (v-on)

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

“`html
增加 1

计数器：{{ counter }}

“`

数据：

javascript
data: {
counter: 0
}

当点击按钮时，counter 的值会增加，页面上的文本也会相应更新。

v-on 也有一个缩写形式：使用 @ 符号。

html
<button @click="counter += 1">增加 1 (缩写)</button>

方法事件处理

更常见的做法是在 v-on 中调用 Vue 实例中的方法。这使得逻辑更清晰。

html
<button @click="greet">打招呼</button>

在 Vue 实例中定义 methods 选项：

javascript
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!');
// `event` 是原生 DOM 事件对象
if (event) {
console.log(event.target.tagName);
}
}
}

事件修饰符

Vue 提供了一些事件修饰符，用于更方便地处理常见的 DOM 事件需求，例如阻止事件冒泡、阻止默认行为等。修饰符通过 . 后缀添加到 v-on 指令后。

“`html

只点一次

“`

还有按键修饰符，用于监听特定的键盘事件：

“`html

“`

5. 表单输入绑定 (v-model)

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

“`html

消息是: {{ message }}

描述是: {{ description }}

{{ checked }}

“`

对应的数据结构：

javascript
data: {
message: '',
description: '',
checked: false, // 复选框 (单个)
checkedNames: [], // 复选框 (多个), 数据是一个数组
picked: '', // 单选按钮
selected: '', // 下拉列表 (单选)
multiSelected: [] // 下拉列表 (多选), 数据是一个数组
}

v-model 修饰符

• .lazy: 默认情况下，v-model 在 input 事件中同步输入框的值。添加 .lazy 修饰符会改用 change 事件进行同步。
  html
<input v-model.lazy="message">
• .number: 将用户的输入值自动转换为数字类型。
  html
<input v-model.number="age" type="number">
• .trim: 自动过滤用户输入的首尾空白字符。
  html
<input v-model.trim="message">

四、Class 与 Style 绑定

在开发中，经常需要动态地改变元素的 CSS 类名或内联样式。v-bind 指令除了可以绑定普通属性，还专门增强了对 class 和 style 的处理能力。

1. 绑定 HTML Class (v-bind:class)

你可以向 :class 传递对象或数组，实现动态切换类名。

• 对象语法：
  html
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
  数据：
  javascript
data: {
isActive: true,
hasError: false
}
  渲染结果：<div class="active"></div>
  当 isActive 为真时，active 类会存在；当 hasError 为真时，text-danger 类会存在。你可以同时使用多个布尔值来控制多个类。

• 数组语法：
  html
<div :class="[activeClass, errorClass]"></div>
  数据：
  javascript
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
  渲染结果：<div class="active text-danger"></div>
  你可以将多个类名作为数组元素传入。数组元素也可以是对象，实现更复杂的组合：
  html
<div :class="[{ active: isActive }, errorClass]"></div>

• 与普通 class 并存：
  你可以在元素上同时使用普通 class 属性和 :class 绑定。
  html
<div class="static-class" :class="{ active: isActive }"></div>
  如果 isActive 为真，渲染结果是 <div class="static-class active"></div>。

2. 绑定内联样式 (v-bind:style)

你可以向 :style 传递对象或数组，实现动态设置内联样式。

• 对象语法：
  html
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  数据：
  javascript
data: {
activeColor: 'red',
fontSize: 30
}
  渲染结果：<div style="color: red; font-size: 30px;"></div>
  CSS 属性名可以使用驼峰式 (camelCase) 或短横线分隔 (kebab-case)，Vue 会自动处理。

• 数组语法：
  html
<div :style="[baseStyles, overridingStyles]"></div>
  数据：
  javascript
data: {
baseStyles: {
color: 'blue',
fontSize: '20px'
},
overridingStyles: {
fontWeight: 'bold'
}
}
  渲染结果：<div style="color: blue; font-size: 20px; font-weight: bold;"></div>
  数组中的多个样式对象会合并，如果属性名重复，后面的会覆盖前面的。

五、计算属性 (Computed Properties)

对于任何复杂逻辑，你都应该使用计算属性。计算属性允许你基于响应式数据派生出新的数据。它们是声明式的：你定义一个函数，该函数的返回值将作为计算属性的值。当它依赖的响应式数据发生变化时，计算属性会自动重新计算。

例如，我们有一个 firstName 和 lastName，想显示完整的名字：

“`html

“`

javascript
var vm = new Vue({
el: '#example-computed',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('');
}
}
});

与在模板中使用方法（如 {{ reverseMessage() }}）相比，使用计算属性有几个优点：

1. 缓存 (Caching): 计算属性是基于其响应式依赖进行缓存的。只有当计算属性的依赖（这里是 message）发生改变时，它才会重新求值。这意味着只要 message 没有改变，多次访问 reversedMessage 计算属性会立即返回之前计算的结果，而不会再次执行函数。方法则不同，每次访问都会执行函数。这对于性能敏感的计算来说非常重要。
2. 可读性： 在模板中使用 { { reversedMessage } } 比 { { reverseMessage() } } 更简洁、更具声明性，表明这只是一个属性的访问，而不是一个函数的调用。
3. 意图清晰： 计算属性用于处理和展现数据，方法用于响应事件或执行副作用。区分使用可以使代码意图更清晰。

计算属性的 Setter

计算属性默认只有 getter 函数。但在需要的时候，你也可以提供一个 setter 函数：

javascript
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName;
},
// setter
set: function (newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
},
data: {
firstName: 'John',
lastName: 'Doe'
}

现在当你设置 vm.fullName = 'Jane Doe' 时，setter 会被调用，从而更新 vm.firstName 和 vm.lastName。

六、侦听器 (Watchers)

虽然计算属性在大多数情况下更适用，但有时你需要执行响应数据变化的副作用，例如异步操作或比较耗时的逻辑。这时，侦听属性 (watch) 就派上用场了。

你可以使用 watch 选项，观察一个数据属性或计算属性的变化，并在变化时执行一个回调函数。

“`html

“`

javascript
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...';
this.getAnswer(); // 调用一个方法来处理异步逻辑
}
},
methods: {
getAnswer: _.debounce(function () { // 使用 debounce 限制请求频率
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)';
return;
}
this.answer = 'Searching...';
var vm = this;
axios.get('https://yesno.wtf/api') // 假设使用 axios 进行网络请求
.then(function (response) {
vm.answer = _.capitalize(response.data.answer);
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error;
});
}, 500) // 在用户停止输入 500 毫秒后执行
}
});

（注意：这个例子依赖于外部库 lodash 的 debounce 和 axios 进行 HTTP 请求，实际运行时需要引入这些库。）

在这个例子中，当 question 数据属性发生变化时，watch 中的函数会被触发。我们在这里执行了一个异步操作（发送 HTTP 请求），并在请求返回后更新 answer。

计算属性 vs 侦听器

• 计算属性： 适用于一个或多个数据属性的变化派生出新的数据属性的场景。它们具有缓存，是声明式的。
• 侦听器： 适用于响应数据变化时需要执行副作用的场景，例如执行异步操作、调用第三方库的方法、或者当某个属性变化时需要执行一些特定的逻辑。它们是命令式的。

大多数情况下，如果可以，请优先使用计算属性。只有在处理副作用或异步操作时才考虑使用侦听器。

七、Vue 实例的生命周期

每个 Vue 实例在被创建时都经历一系列的初始化步骤，例如设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时，它也会运行被称为生命周期钩子函数的函数，允许你在特定的阶段执行自己的代码。

主要的生命周期钩子函数（Vue 2 为例）：

• beforeCreate: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时，data 中的数据和 methods 中的方法都尚未初始化，无法访问。
• created: 在实例创建完成后被立即调用。在这一步，实例已经完成了以下配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。此时，data 中的数据和 methods 中的方法都可以访问，但尚未挂载到 DOM。这里适合进行初始数据的获取（例如 AJAX 请求）。
• beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。此时模板已经编译完成（或者从单文件组件中获取），但尚未挂载到 DOM。
• mounted: 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。此时，DOM 已经渲染完成，可以进行 DOM 操作或访问 $refs。这里适合进行 DOM 相关的操作，例如集成第三方 DOM 库。
• beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子中访问更新前的 DOM 状态。
• updated: 数据更新后调用，发生在虚拟 DOM 重新渲染和打补丁之后。此时，DOM 已经更新完成，可以进行 DOM 操作。
• beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。这里适合进行清理工作，例如移除事件监听器或计时器。
• destroyed: 实例销毁后调用。此时，Vue 实例的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

在一个 Vue 实例的生命周期中，这些钩子会按顺序被调用。理解这些钩子非常重要，它决定了你何时何地去执行代码（例如何时获取数据、何时操作 DOM 等）。

一个简单的生命周期示例：

“`javascript
var vm = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue!’
},
beforeCreate: function () {
console.log(‘beforeCreate: data is reactive?’, this.message); // undefined
},
created: function () {
console.log(‘created: data is reactive?’, this.message); // “Hello Vue!”
// 适合在这里进行数据请求
},
beforeMount: function () {
console.log(‘beforeMount: el is available?’, this.$el); //

console.log(‘beforeMount: DOM is rendered?’, this.$el.textContent); // “{{ message }}” 或编译后的初始内容
},
mounted: function () {
console.log(‘mounted: DOM is rendered?’, this.$el.textContent); // “Hello Vue!”
// 适合在这里操作 DOM 或集成第三方库
},
beforeUpdate: function () {
console.log(‘beforeUpdate: Data is about to update.’);
},
updated: function () {
console.log(‘updated: DOM has updated.’);
},
beforeDestroy: function () {
console.log(‘beforeDestroy: Instance is about to be destroyed.’);
},
destroyed: function () {
console.log(‘destroyed: Instance has been destroyed.’);
}
});

// 几秒后销毁实例观察效果
// setTimeout(() => {
// vm.$destroy();
// }, 5000);

// 修改数据观察 update 钩子
// setTimeout(() => {
// vm.message = ‘Message Updated!’;
// }, 2000);
“`

八、组件基础

组件是 Vue.js 中最强大且最重要的特性之一。组件允许我们将大型应用拆分成独立、可复用、自包含的小块。一个 Vue 组件本质上是一个拥有预定义选项的 Vue 实例。

1. 注册组件

你可以通过 Vue.component() 方法全局注册组件：

javascript
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () { // 组件的 data 必须是一个函数，返回一个对象
return {
count: 0
}
},
template: `
<button @click="count++">
你点击了我 {{ count }} 次
</button>
`
});

然后就可以在任何 Vue 实例的模板中使用这个组件：

“`html

“`

javascript
new Vue({ el: '#components-demo' });

注意：这里我们注册了三次 <button-counter>，它们每一个都会维护自己的 count 状态。这是因为组件的 data 必须是一个函数，这样每个组件实例都会返回一个新的数据对象，从而避免了组件之间共享同一个数据对象的问题。

2. 通过 Prop 传递数据

组件之间经常需要传递数据。父组件可以通过 props 向子组件传递数据。

javascript
// 定义一个子组件
Vue.component('child-component', {
// 通过 props 选项声明接收的数据
props: ['message'],
template: '<span>{{ message }}</span>'
});

在父组件中使用并传递数据：

“`html

“`

javascript
new Vue({
el: '#parent-child-demo',
data: {
parentMessage: '这是来自父组件的消息'
}
});

通过 :message="parentMessage"，我们将父组件的 parentMessage 数据绑定到子组件的 message prop 上。子组件在其模板中就可以访问这个 message prop，并将其作为自己的数据使用。

Props 可以进行类型、是否必需、默认值等验证。

javascript
props: {
// 基础的类型检查 (`null` 和 `undefined` 会跳过任何类型检查)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}

3. 通过事件向父组件发送消息

子组件需要向父组件通信时，不能直接修改父组件的数据（这被称为“单向数据流”，是 Vue 的核心原则之一）。子组件应该通过触发自定义事件的方式来通知父组件。

javascript
// 定义一个子组件
Vue.component('emitter-component', {
template: `
<button @click="notifyParent">点击我通知父组件</button>
`,
methods: {
notifyParent: function () {
// 触发一个名为 'child-event' 的事件
this.$emit('child-event', '我是子组件传递的数据');
}
}
});

在父组件中监听这个事件：

“`html

“`

javascript
new Vue({
el: '#event-demo',
data: {
parentData: '等待子组件发送消息...'
},
methods: {
handleChildEvent: function (dataFromChild) {
this.parentData = '收到子组件消息: ' + dataFromChild;
console.log('子组件传递的数据:', dataFromChild);
}
}
});

通过 @child-event="handleChildEvent"，父组件监听子组件触发的 child-event 事件，并在事件发生时调用父组件的 handleChildEvent 方法。子组件可以通过 $emit 的第二个参数传递数据给父组件。

这种“props 向下传递，事件向上传递”的模式构成了父子组件通信的基本方式。

4. 局部注册组件

全局注册的组件可以在任何地方使用，但对于大型应用，推荐使用局部注册，以便更清晰地管理组件依赖关系。

“`javascript
// 定义组件选项对象
var Child = {
template: ‘{{ message }}‘,
props: [‘message’]
}

// 定义另一个组件选项对象
var Emitter = {
template: <button @click="$emit('some-event', '数据')">触发事件</button>
}

// 父组件，在 components 选项中局部注册
var Parent = {
template: <div>
<!-- 使用局部注册的组件 -->
<child :message="msg"></child>
<emitter @some-event="handleEvent"></emitter>
<p>{{ receivedData }}</p>
</div>,
data: function() {
return {
msg: ‘来自父组件的数据’,
receivedData: ‘无’
};
},
components: { // 局部注册组件
‘child’: Child,
’emitter’: Emitter
},
methods: {
handleEvent: function(data) {
this.receivedData = ‘收到数据: ‘ + data;
}
}
};

// 根实例中使用局部注册的组件 (这里 Parent 本身也可以看作一个组件)
new Vue({
el: ‘#local-registration-demo’,
// 直接将 Parent 的选项作为根实例的选项
…Parent // 使用展开运算符将 Parent 的选项合并到根实例
});
“`

“`html

“`

在实际开发中，我们通常会使用 Vue CLI 或 Vite 等构建工具，它们支持单文件组件 (Single-File Components – SFC)，将模板、JavaScript 逻辑和 CSS 样式写在同一个 .vue 文件中，这极大地提升了开发体验和代码组织能力。局部注册在 SFC 中是默认且推荐的方式。

结论

通过本文，我们深入探讨了 Vue.js 的基础知识，包括：

• Vue 实例的创建和作用
• 如何使用 data 定义响应式数据
• 模板语法，如文本插值 {{ }}, v-html, v-pre, v-once
• 常用的内置指令，包括 v-bind, v-if, v-show, v-for, v-on, v-model
• 如何动态绑定元素的 class 和 style
• 计算属性 (computed) 的作用、优势和使用方法
• 侦听器 (watch) 的作用和使用场景
• Vue 实例的生命周期钩子函数
• 组件的基础，包括注册、通过 props 传递数据和通过 $emit 触发事件

这些基础概念是构建任何 Vue.js 应用的基石。掌握它们，你就已经迈出了使用 Vue 进行现代前端开发的第一步。

当然，Vue.js 的世界远不止于此。要构建更大型、更复杂的应用，你还需要学习：

• 单文件组件 (.vue 文件)
• 组件的更多高级用法 (插槽 slots, 动态组件, 异步组件等)
• 路由管理 (Vue Router)
• 状态管理 (Pinia 或 Vuex)
• 组件化开发的最佳实践
• 构建工具 (Vue CLI, Vite)

官方文档是继续深入学习的最佳资源。不断练习，尝试构建一些小型项目，你会越来越熟练地运用 Vue.js。

Vue.js 以其优秀的性能、简洁的 API 和渐进式的特性，成为了构建现代 Web 界面的强大选择。希望这篇文章能帮助你顺利踏上 Vue.js 的学习之路！