快速了解 Vue 2：一篇入门指南 – wiki基地

作者： /

快速了解 Vue 2：一篇入门指南

引言

欢迎来到前端开发的世界！如果你正在寻找一个强大、灵活且易于学习的框架来构建现代用户界面，那么 Vue 2 是一个绝佳的选择。自发布以来，Vue.js 以其温和的学习曲线、卓越的性能和活跃的社区赢得了广大开发者的喜爱。

本篇文章旨在为你提供一份 Vue 2 的全面入门指南。我们将从零开始，探索 Vue 的核心概念，学习如何构建响应式的用户界面，并最终能够利用 Vue 2 构建自己的第一个应用。无论你是一名经验丰富的后端开发者，还是刚接触前端的新手，亦或是正在考虑从其他框架迁移过来，这篇指南都将为你打下坚实的基础。

我们将涵盖以下内容：

  1. 什么是 Vue 2？为什么选择它？
  2. 开始你的第一个 Vue 2 应用（CDN 方式）
  3. Vue 实例：应用的基石
  4. 模板语法：数据绑定与指令
  5. 数据与方法：驱动应用逻辑
  6. 计算属性与侦听器：响应式数据的处理
  7. 条件渲染与列表渲染：动态展示内容
  8. 事件处理：用户交互
  9. 表单输入绑定：双向数据流
  10. 组件：构建可复用的 UI 模块
  11. 生命周期钩子：理解组件的生命周期
  12. Vue CLI：现代化开发的利器
  13. 构建一个简单的应用示例
  14. 进阶之路：下一步学习什么？

让我们一起踏上 Vue 2 的学习之旅吧！

1. 什么是 Vue 2？为什么选择它？

Vue (读音 /vjuː/，类似于 view) 是一款用于构建用户界面的渐进式框架。所谓“渐进式”，意味着你可以逐步地、按需地将其集成到你的项目中。你可以在一个简单页面中只用它来增强一部分交互，也可以用它构建一个复杂的单页应用 (Single Page Application, SPA)。

Vue 2 的核心是其响应式的数据绑定系统和组件化的思想。它使得开发者能够声明式地描述 UI 状态，而无需手动操作 DOM。当数据发生变化时，Vue 会自动更新视图，这极大地简化了前端开发。

为什么选择 Vue 2？

  • 易于学习和上手: Vue 的 API 设计简洁直观，文档详尽友好。即使只有基本的 HTML、CSS 和 JavaScript 知识，也能快速入门。其核心库只关注视图层，体积小巧。
  • 渐进式框架: 如前所述，你可以按需使用。这使得 Vue 很容易集成到现有项目中，而无需进行大规模重构。你可以从一个简单的功能开始使用 Vue，然后逐步扩展其应用范围。
  • 响应式数据绑定: Vue 使用了一种基于 getter/setter 的机制（在 Vue 3 中改为 Proxy），能够追踪数据的变化，并自动更新相关的 DOM。这意味着你只需要管理数据，而不用关心 DOM 更新的繁琐细节。
  • 组件化: Vue 鼓励你将 UI 拆分成独立、可复用的小块——组件。每个组件都有自己的逻辑、模板和样式。这种模块化的开发方式提高了代码的可维护性、可读性和复用性。
  • 高性能: Vue 经过优化，能够高效地更新 DOM。它使用了虚拟 DOM (Virtual DOM) 技术，但其实现方式与 React 等框架略有不同，通常在特定场景下表现出更优的性能。
  • 丰富的生态系统: Vue 有一套完整的工具链和配套库，如 Vue Router (路由管理)、Vuex (状态管理，类似于 Redux 或 Mobx)、Vue CLI (项目脚手架)、Devtools (浏览器开发者工具扩展) 等，能够满足构建大型复杂应用的需求。
  • 活跃的社区: Vue 拥有庞大的全球开发者社区，这意味着你可以轻松找到学习资源、解决问题和获取支持。

总而言之，Vue 2 是一个强大、灵活、高性能且易于使用的前端框架，非常适合从小型到大型的各种项目。

2. 开始你的第一个 Vue 2 应用（CDN 方式）

最快的体验 Vue 的方式是通过 CDN (Content Delivery Network) 将 Vue.js 库直接引入到 HTML 文件中。这种方式无需复杂的构建工具配置，非常适合快速原型开发或为小型页面添加交互。

创建一个简单的 HTML 文件（例如 index.html），并添加以下内容：

“`html




My first Vue app


{{ message }}



“`

用浏览器打开这个 index.html 文件，你将看到页面上显示 Hello, Vue 2!。

代码解释：

  1. 我们在 <body> 中创建了一个 <div id="app"> 元素。这是 Vue 实例将要控制的区域。
  2. 在 div 内部，我们使用了 {{ message }}。这是 Vue 的模板语法，叫做插值 (Interpolation)。它告诉 Vue 在这里显示 message 数据的值。
  3. 我们通过 <script> 标签从 CDN 引入了 Vue.js 库。
  4. 在第二个 <script> 标签中，我们创建了一个新的 Vue 实例： var app = new Vue({...})。
  5. el: '#app' 选项指定了 Vue 实例将要挂载的 DOM 元素。Vue 会接管这个元素及其内部的一切。
  6. data: { message: 'Hello, Vue 2!' } 选项定义了应用的数据。这里的 message 属性将被 Vue 的响应式系统代理。

现在，尝试在浏览器的开发者工具中修改 app.message 的值：

javascript
app.message = 'Vue 2 is awesome!';

你会发现，页面的内容会立即更新为 Vue 2 is awesome!。这就是 Vue 响应式系统的魅力！你不需要手动找到那个 DOM 元素并修改它的文本内容，只需要改变数据，视图会自动更新。

这就是 Vue 的核心思想：数据驱动视图。你只需要关注数据的状态，而 Vue 会负责将数据呈现在用户界面上。

3. Vue 实例：应用的基石

每个 Vue 应用都是通过创建一个新的 Vue 实例开始的：

javascript
var vm = new Vue({
// 选项对象
})

在上面的示例中，我们创建了一个名为 app 的 Vue 实例。按照惯例，我们通常将 Vue 实例命名为 vm (ViewModel 的缩写)，尽管这不是强制的。

当你创建一个 Vue 实例时，你需要传入一个选项对象 (options object)。这个对象包含了你想要用来创建应用的各种配置，比如：

  • el: 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。Vue 实例将完全控制这个元素及其子元素。
  • data: 一个对象或返回对象的函数（在组件中必须是函数），用来存储应用的状态数据。这些数据是响应式的，任何对它们的修改都会触发视图更新。
  • methods: 一个对象，包含应用中需要用到的各种函数。这些函数可以在模板中通过事件指令 (v-on) 调用，或者在实例内部通过 this 访问。
  • computed: 一个对象，包含计算属性的定义。计算属性是基于它们依赖的数据缓存的。只有当依赖数据发生变化时，计算属性才会重新求值。
  • watch: 一个对象，用于侦听数据属性的变化。当一个特定的数据属性发生变化时，可以执行一个自定义的函数。
  • components: 一个对象，用于注册当前实例或组件可以使用的子组件。
  • template: 一个字符串模板，会替代挂载元素 (el) 的内容。
  • 还有其他更高级的选项，如 props (用于组件接收父组件数据)、mixins (混入)、directives (自定义指令) 等。

理解 Vue 实例及其选项是掌握 Vue 的关键。它是你组织和管理应用逻辑与数据的核心。

4. 模板语法：数据绑定与指令

Vue 使用一种基于 HTML 的模板语法，允许你声明式地将 DOM 绑定到底层 Vue 实例的数据。所有的 Vue 模板都是合法的 HTML，因此能被标准的浏览器解析器解析。

插值 (Interpolations):

最基本的数据绑定形式是文本插值，使用“Mustache”语法（双大括号）：

html
<span>Message: {{ message }}</span>

双大括号内的表达式会被相应 Vue 实例上 data 属性的值替换。插值内容会被作为纯文本处理，而不是 HTML。

HTML 插值:

如果需要输出真正的 HTML，可以使用 v-html 指令：

“`html

“`

这里的 rawHtml 变量的值会被作为 HTML 解析并插入到 div 中。注意： 在网站上动态渲染任意 HTML 是非常危险的，容易导致 XSS 攻击。只在可信内容上使用 v-html，并且永远不要使用用户提供的内容作为 v-html 的值。

属性绑定 (Attribute Bindings):

Mustache 语法不能用于 HTML 属性。要绑定属性，需要使用 v-bind 指令：

“`html

…
“`

v-bind 指令告诉 Vue 将元素的 id 或 href 属性与 Vue 实例的 dynamicId 或 url 数据属性同步。

v-bind 有一个很常用的缩写：冒号 :。

“`html

…
“`

指令 (Directives):

指令是带有 v- 前缀的特殊属性。指令的值通常是单个 JavaScript 表达式 (除了少数例外，如 v-for)。指令的职责是当其表达式的值发生变化时，相应地更新 DOM。

我们已经看到了 v-html 和 v-bind。还有许多其他的指令，比如：

  • v-if: 条件性地渲染一块内容。
  • v-else, v-else-if: 用于 v-if 的补充。
  • v-show: 根据条件显示或隐藏元素。
  • v-for: 循环渲染列表。
  • v-on: 监听 DOM 事件。
  • v-model: 在表单输入和应用状态之间创建双向绑定。

指令可以接受参数，在指令名称后面以冒号分隔。例如，v-bind 参数是属性名，v-on 参数是事件名：

html
<a v-bind:href="url">...</a> <!-- 参数是 "href" -->
<button v-on:click="doSomething">...</button> <!-- 参数是 "click" -->

v-on 也有一个缩写：@。

html
<button @click="doSomething">...</button> <!-- 参数是 "click" -->

5. 数据与方法：驱动应用逻辑

数据 (Data):

Vue 实例的数据通过 data 选项提供。如前所述，data 属性必须返回一个对象。Vue 会将这个对象中的所有属性加入到它的响应式系统中。

javascript
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
counter: 0,
isVisible: true,
items: ['apple', 'banana']
}
})

现在你可以通过 vm.message、vm.counter 等访问这些属性。当这些属性的值被改变时，依赖它们的视图会自动更新。

重要提示： 当 Vue 实例创建后，data 对象上的属性都被代理到了 Vue 实例上。也就是说，vm.message 实际上是访问 vm._data.message。但是直接访问 vm.message 更常用。

添加响应式属性的注意事项： Vue 无法检测到对象属性的添加或删除。例如，如果在实例创建后向 data 对象添加一个新的属性，这个新属性不是响应式的，它的变化不会触发视图更新。如果你确实需要添加响应式属性，应该使用 Vue.set(object, propertyName, value) 或 vm.$set(object, propertyName, value)。对于数组，Vue 也无法检测到通过索引直接设置元素，或者修改数组长度。你需要使用 Vue 检测得到变动的数组方法（push(), pop(), shift(), unshift(), splice(), sort(), reverse()）或者使用 vm.$set(array, index, value)。

方法 (Methods):

应用逻辑通常需要执行一些操作，比如响应用户的点击、处理表单提交等。这些操作可以放在 methods 选项中定义的方法里。

javascript
var vm = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
increment: function() {
this.counter++; // 在方法中，通过 this 访问 Vue 实例的数据属性
},
decrement() { // ES6 语法也可以
this.counter--;
},
greet(name) {
alert('Hello, ' + name + '!');
}
}
})

在模板中，你可以通过 v-on 指令调用这些方法：

“`html

Count: {{ counter }}



“`

在方法中，this 总是指向当前的 Vue 实例。这意味着你可以通过 this.propertyName 访问 data 中的属性，也可以通过 this.methodName() 调用其他的 methods。

6. 计算属性与侦听器：响应式数据的处理

在处理响应式数据时，经常会遇到需要基于现有数据计算出新值或在数据变化时执行一些副作用的场景。Vue 提供了计算属性 (computed) 和侦听器 (watch) 来优雅地处理这些情况。

计算属性 (Computed Properties):

计算属性允许你定义一个属性，它的值是基于其他响应式数据“计算”得来的。最重要的是，计算属性是缓存的。只有当它依赖的响应式数据发生变化时，它才会重新计算。

假设你有一个 firstName 和一个 lastName，想显示完整的姓名：

javascript
var vm = new Vue({
el: '#app',
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function() {
console.log('Calculating full name...'); // 仅用于演示缓存
return this.firstName + ' ' + this.lastName;
}
}
})

在模板中，你可以像访问普通数据属性一样访问计算属性：

“`html

Full Name: {{ fullName }}

“`

修改 vm.firstName 或 vm.lastName 会触发 fullName 的重新计算和视图更新。但如果你多次访问 fullName 并且 firstName 和 lastName 没有改变，fullName 的函数不会被多次执行，因为它的结果被缓存了。

什么时候用计算属性而不是方法？

  • 如果你需要基于现有数据计算出一个新值，并且希望这个值被缓存，使用计算属性。
  • 方法每次访问时都会执行函数，即使依赖的数据没有变化。计算属性则依赖于其依赖项的缓存。
  • 计算属性更适合用于模板中的复杂表达式，使其更具可读性。

“`html

{{ calculateComplexValue() }}

{{ computedValue }}

“`

侦听器 (Watchers):

虽然计算属性在处理数据转换方面非常有用，但如果你需要在数据变化时执行异步操作或代价较高的操作（例如，向服务器发送请求，或者执行某个耗时的 DOM 操作），使用侦听器 (watch) 是更合适的选择。

侦听器允许你“观察”一个特定的数据属性，并在它发生变化时执行一个回调函数。

javascript
var vm = new Vue({
el: '#app',
data: {
question: ''
},
watch: {
// 当 question 变化时，执行这个函数
question: function(newQuestion, oldQuestion) {
console.log('Question changed from "' + oldQuestion + '" to "' + newQuestion + '"');
// 这里可以执行异步操作，比如发起 AJAX 请求
this.answer = 'Thinking...';
this.getAnswer(); // 调用另一个方法来获取答案
}
},
methods: {
getAnswer: function() {
// ... 发起异步请求获取答案 ...
}
}
})

计算属性 vs 侦听器总结：

  • 计算属性: 用于根据现有响应式数据派生出新的响应式数据。它提供缓存，并是声明式的。
  • 侦听器: 用于在某个响应式数据发生变化时执行副作用。它更适合执行异步操作、昂贵操作或对数据变化做出更复杂的响应（如命令式地修改其他数据）。

通常情况下，优先使用计算属性来处理数据转换和派生，因为它更简洁且带缓存。只有当你需要执行副作用或者无法用计算属性优雅地表达逻辑时，才考虑使用侦听器。

7. 条件渲染与列表渲染：动态展示内容

前端应用经常需要根据条件显示或隐藏元素，或者根据数据列表渲染多个相似的元素块。Vue 提供了强大的指令来实现这些功能。

条件渲染 (Conditional Rendering):

  • v-if: 根据表达式的布尔值来条件性地渲染元素块。如果在元素上使用了 v-if，当表达式的值为 false 时，元素及其子元素不会被渲染，它们在 DOM 中根本不存在。

    html
    <div id="app">
    <p v-if="isVisible">This paragraph is visible.</p>
    <p v-else>This paragraph is hidden.</p>
    </div>

    javascript
    new Vue({
    el: '#app',
    data: {
    isVisible: true
    }
    })

    v-if 可以配合 v-else-if 和 v-else 来实现类似 JavaScript 的 if/else if/else 结构：

    html
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else>C</div>

  • v-show: 也是根据条件显示或隐藏元素。不同于 v-if，v-show 总是会渲染元素，只是简单地通过 CSS 的 display 属性来控制其显示或隐藏。当条件为 false 时，元素会被添加 display: none; 的样式。

    html
    <p v-show="showMessage">This message is shown or hidden with CSS.</p>

    v-if vs v-show:

    • v-if 是“真实”的条件渲染，因为它会销毁或重建元素。它的开销是切换时的开销。
    • v-show 只是基于 CSS 进行切换。它的开销是初始渲染开销。

    通常，如果需要频繁切换元素的显示/隐藏状态，使用 v-show 更好，因为它的切换成本较低。如果条件很少变化，或者你需要在条件为 false 时完全移除元素以避免不必要的性能开销或副作用，使用 v-if 更好。

列表渲染 (List Rendering):

  • v-for: 用于循环渲染列表。你可以使用 v-for 指令基于一个数组来渲染一个元素列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 是被迭代的数组元素的别名。

    html
    <div id="app">
    <ul>
    <li v-for="item in items" :key="item.id">
    {{ item.text }}
    </li>
    </ul>
    </div>

    javascript
    new Vue({
    el: '#app',
    data: {
    items: [
    { id: 1, text: 'Learn Vue' },
    { id: 2, text: 'Build an amazing app' },
    { id: 3, text: 'Be happy' }
    ]
    }
    })

    在 v-for 循环中，可以使用 (item, index) in items 的形式同时获取元素和索引：

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

    v-for 也可以迭代对象的属性：

    html
    <div v-for="(value, key, index) in object" :key="key">
    {{ index }}. {{ key }}: {{ value }}
    </div>

    key 的重要性:

    在使用 v-for 进行列表渲染时，为每个列表项提供一个唯一的 key 属性是非常重要的（除了极少数简单的场景）。key 主要用于 Vue 跟踪每个节点的身份，从而能够高效地重用和重新排序现有元素，而不是从头开始渲染每一个。

    理想情况下，key 应该是数据的唯一 ID。如果数据没有唯一 ID，可以使用索引，但索引作为 key 在某些情况下可能导致性能问题或状态错误（例如，当你通过索引删除或插入元素时）。

8. 事件处理：用户交互

响应用户交互是前端应用的核心。Vue 提供了 v-on 指令来监听 DOM 事件，并在事件触发时执行 JavaScript 代码或调用方法。

“`html


Count: {{ counter }}

“`

javascript
new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
increment: function() {
this.counter++;
}
}
})

  • 内联处理: 可以直接在 v-on 的值中写简单的 JavaScript 表达式。
  • 方法处理: 更常见和推荐的方式是调用一个在 methods 中定义的方法。这使得代码更清晰，逻辑更易于维护。

事件修饰符 (Event Modifiers):

Vue 提供了事件修饰符来处理一些常见的事件需求，而无需在方法中写复杂的逻辑。修饰符使用点(.)连接在事件名后面：

  • .stop: 阻止事件冒泡 (event.stopPropagation())。
  • .prevent: 阻止默认行为 (event.preventDefault())。
  • .capture: 使用事件捕获模式。
  • .self: 只当事件从元素本身触发时触发处理函数（而不是从其子元素）。
  • .once: 事件只触发一次。
  • .passive: 滚动事件的默认行为 (尤其是 onscroll) 将立即发生，不会等待 preventDefault() 阻止它。用于提升移动端滚动性能。

“`html

…

…

…

…

“`

按键修饰符 (Key Modifiers):

在监听键盘事件时，可以使用按键修饰符来监听特定的按键：

“`html










“`

9. 表单输入绑定：双向数据流

处理表单输入时，经常需要在表单输入元素 (<input>, <select>, <textarea>) 和应用状态之间进行双向绑定。这意味着当输入元素的值发生变化时，应用状态会随之更新；反之，当应用状态发生变化时，输入元素的值也会更新。Vue 提供了 v-model 指令来实现这一点。

v-model 指令本质上是 :value 和 @input 的语法糖。

“`html

Message is: {{ message }}

“`

javascript
new Vue({
el: '#app',
data: {
message: ''
}
})

现在，当你在输入框中输入文本时，message 数据属性会立即更新；反之，如果你在代码中改变 message 的值，输入框中的文本也会随之更新。

v-model 适用于不同类型的表单输入：

  • 文本输入框 (<input type="text">, <textarea>): 绑定到 value 属性。
  • 复选框 (<input type="checkbox">):
    • 单个复选框：绑定到布尔值。
    • 多个复选框绑定到同一个数组：绑定到该数组，选中时将 value 推入数组，取消选中时移除。
  • 单选按钮 (<input type="radio">): 绑定到选中的单选按钮的 value 属性。
  • 选择框 (<select>):
    • 单选：绑定到选中的选项的 value 属性。
    • 多选 (<select multiple>)：绑定到包含所有选中选项的 value 的数组。

示例 – 复选框：

“`html









Checked names: {{ checkedNames }}

“`

javascript
new Vue({
el: '#app',
data: {
checkedNames: [] // 必须初始化为数组
}
})

v-model 修饰符:

  • .lazy: 默认情况下，v-model 在 input 事件触发时更新。添加 .lazy 会使它在 change 事件触发时更新（通常在输入框失去焦点时）。
  • .number: 自动将用户输入的值转为数字（如果可以的话）。
  • .trim: 自动过滤用户输入的首尾空白字符。

html
<input v-model.lazy="message">
<input v-model.number="age" type="number">
<input v-model.trim="searchText">

10. 组件：构建可复用的 UI 模块

组件是 Vue 强大能力的体现之一。它们是可复用的 Vue 实例，通常拥有预定义好的模板、脚本逻辑和样式。将应用拆分成组件有助于提高代码的可维护性、可读性和复用性。

想象一下构建一个复杂的网页，你可以将其拆分成 Header 组件、Sidebar 组件、Content 组件、Footer 组件等等。每个组件再进一步拆分成更小的组件（例如，Content 组件可以包含 List 组件、Item 组件）。

定义和注册组件:

Vue 组件需要先被定义，然后才能在父级模板中使用。有两种注册方式：全局注册和局部注册。

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

    “`javascript
    // 定义一个全局组件
    Vue.component(‘my-component’, {
    template: ‘

    A custom component!

    ‘
    // 组件的数据必须是一个函数，返回一个对象
    data: function() {
    return {
    count: 0
    }
    }
    });

    // 创建根实例
    new Vue({ el: ‘#app’ });
    “`

    html
    <div id="app">
    <my-component></my-component> <!-- 在模板中使用 -->
    <my-component></my-component> <!-- 可以多次使用 -->
    </div>

    全局注册的组件在任何地方都可以使用，但这有时会导致组件树不够清晰，并且即使组件没有被使用，它也会被包含在最终的打包文件中（如果使用构建工具），增加文件体积。因此，在实际开发中，通常推荐使用局部注册。

  • 局部注册: 在 Vue 实例或另一个组件的选项中，通过 components 属性注册组件。这样注册的组件只能在其注册的父级模板中使用。

    “`javascript
    // 定义组件选项对象
    var buttonCounter = {
    template: ‘‘,
    data: function() {
    return {
    count: 0
    }
    }
    };

    // 在父级 Vue 实例中局部注册
    new Vue({
    el: ‘#app’,
    components: {
    // 将只能在父级模板中使用
    ‘my-button-counter’: buttonCounter
    }
    });
    “`

    html
    <div id="app">
    <my-button-counter></my-button-counter>
    </div>

组件的模板:

组件的模板可以是一个字符串 (template: '...')，也可以使用 <template> 标签结合构建工具（如 Vue CLI）来实现单文件组件 (.vue 文件)，这在现代化开发中更常用。

组件的数据 (Data):

重要： 组件的 data 选项必须是一个函数，而不是一个对象。这样做是为了确保每个组件实例都有自己独立的数据副本，避免数据共享导致的问题。如果 data 是一个对象，所有组件实例将共享同一个对象，一个实例的数据变化会影响所有其他实例。

javascript
data: function() {
return {
// 每个组件实例都有自己的 message
message: 'Hello component!'
}
}

组件间的通信 (Props & Events):

组件是独立的，但它们经常需要相互通信。最常见的通信方式是：

  • Props (父组件向子组件传递数据): 父组件通过属性 (props) 向子组件传递数据。子组件在 props 选项中声明它接受哪些 prop。

    “`javascript
    // 子组件定义
    Vue.component(‘child’, {
    // 声明接收一个 title prop
    props: [‘title’],
    template: ‘

    {{ title }}

    ‘
    });

    // 父组件使用并传递数据
    new Vue({
    el: ‘#app’,
    data: {
    pageTitle: ‘My Great Title’
    }
    });
    “`

    html
    <div id="app">
    <child title="Hello from parent"></child>
    <child :title="pageTitle"></child> <!-- 动态绑定 -->
    </div>

    Prop 也可以定义类型、默认值和验证器，以增加组件的健壮性。

  • Custom Events (子组件向父组件发送消息): 子组件通过触发自定义事件 ($emit) 向父组件发送消息或数据。父组件通过 v-on 监听子组件触发的事件。

    “`javascript
    // 子组件定义
    Vue.component(‘button-item’, {
    template: ‘‘,
    methods: {
    handleClick: function() {
    // 触发一个名为 ‘my-event’ 的事件
    this.$emit(‘my-event’, ‘Hello from child!’);
    }
    }
    });

    // 父组件使用并监听事件
    new Vue({
    el: ‘#app’,
    methods: {
    handleMyEvent: function(message) {
    alert(‘Received event: ‘ + message);
    }
    }
    });
    “`

    html
    <div id="app">
    <button-item @my-event="handleMyEvent"></button-item>
    <!-- 也可以直接在内联表达式中处理 -->
    <button-item @my-event="alert('Direct inline handler')"></button-item>
    </div>

Props 实现自上而下的数据流，事件实现自下而上的消息传递。这是 Vue 组件通信的基础。

11. 生命周期钩子：理解组件的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听，编译模板，将实例挂载到 DOM 并在数据变化时更新 DOM，等等。同时，它也会运行一些叫做生命周期钩子的函数，让开发者可以在特定阶段执行自己的代码。

生命周期钩子是一些特殊的函数，定义在 Vue 实例的选项对象中。常用的生命周期钩子包括：

  • beforeCreate: 实例刚在内存中被创建出来，但还没有初始化数据 (data) 和事件 (methods)。
  • created: 实例已经创建完成，数据观测 (data)、属性和方法的运算，watch/event 事件回调都已初始化。但此时模板还没有被编译或挂载到 DOM 中。这是最常用的钩子之一，常用于异步数据请求。
  • beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。模板已经在内存中编译，但尚未渲染到页面。
  • mounted: 实例被挂载到 DOM 后调用。此时，模板已经渲染到页面上，可以通过 this.$el 访问到 DOM 元素。这是另一个最常用的钩子，常用于需要访问 DOM 的操作，如集成第三方库。
  • beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子中访问到更新前的 DOM。
  • updated: 由于数据更新导致的虚拟 DOM 重新渲染和打补丁，并呈现在 DOM 上之后调用。此时 DOM 已经更新完毕。
  • beforeDestroy: 实例销毁之前调用。实例仍然完全可用。
  • destroyed: 实例销毁后调用。Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

理解这些钩子能帮助你更好地在合适的时机执行代码，比如在 created 中请求数据，在 mounted 中操作 DOM 或集成第三方插件，在 beforeDestroy 中清理资源（如计时器或事件监听）。

javascript
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
beforeCreate: function() {
console.log('beforeCreate: 数据和方法都还不能访问');
},
created: function() {
console.log('created: 数据和方法已初始化，可以访问 message:', this.message);
// 常在这里进行异步数据请求
},
beforeMount: function() {
console.log('beforeMount: 模板已编译，但尚未渲染到 DOM');
},
mounted: function() {
console.log('mounted: 实例已挂载到 DOM，可以通过 this.$el 访问', this.$el);
// 常在这里操作 DOM
},
// ... 其他钩子 ...
destroyed: function() {
console.log('destroyed: 实例已销毁');
}
})

12. Vue CLI：现代化开发的利器

虽然通过 CDN 使用 Vue 适用于简单场景，但对于更复杂、更大的应用，我们通常会使用构建工具，尤其是 Vue CLI (Command Line Interface)。Vue CLI 是一个官方提供的脚手架工具，它提供了一套完整的开发流程：

  • 项目结构搭建
  • 自动化构建配置（Webpack 或 Rollup）
  • 开发服务器（支持热重载）
  • 代码压缩、打包优化
  • CSS 预处理器支持
  • Linting 和格式化
  • 单元测试和端到端测试设置

使用 Vue CLI 可以让你专注于编写应用代码，而无需手动配置复杂的构建工具。

安装 Node.js 和 npm/yarn: Vue CLI 依赖于 Node.js 环境，你需要先安装 Node.js (建议使用 LTS 版本)，安装 Node.js 时通常会自带 npm（或你可以选择安装 yarn 作为替代）。

安装 Vue CLI:

打开终端或命令行工具，运行以下命令全局安装 Vue CLI：

“`bash
npm install -g @vue/cli

或者使用 yarn

yarn global add @vue/cli

“`

安装完成后，你可以通过 vue --version 命令检查安装是否成功。

创建新项目:

使用 Vue CLI 创建一个新的 Vue 2 项目：

bash
vue create my-vue2-app

运行命令后，CLI 会提示你选择一个预设。选择 Manually select features 可以自定义配置，确保选择 Vue version 并选择 2.x。你还可以选择其他特性，如 Babel、Router、Vuex、CSS Pre-processors、Linter/Formatter、Unit Testing、E2E Testing。对于入门，选择默认预设或手动选择 Babel 和 Vuex/Router 即可。

创建项目完成后，进入项目目录并启动开发服务器：

“`bash
cd my-vue2-app
npm run serve

或者使用 yarn

yarn serve

“`

通常，开发服务器会在 http://localhost:8080 启动。打开浏览器访问这个地址，你就能看到创建的 Vue 应用了。

项目结构概览:

一个典型的 Vue CLI 项目结构：

my-vue2-app/
├── node_modules/ # 项目依赖
├── public/ # 静态资源目录
│ ├── favicon.ico
│ └── index.html # 应用的 HTML 入口文件
├── src/ # 源代码目录
│ ├── assets/ # 静态资源 (图片等)
│ ├── components/ # 可复用的 Vue 组件
│ │ └── HelloWorld.vue
│ ├── App.vue # 根组件
│ ├── main.js # 应用入口文件，创建 Vue 实例并挂载
│ └── store.js / router.js # Vuex 和 Vue Router 文件 (如果选择)
├── .gitignore
├── babel.config.js # Babel 配置
├── package.json # 项目信息和依赖
├── README.md
└── vue.config.js # Vue CLI 配置 (可选)

单文件组件 (.vue):

使用 Vue CLI 创建的项目通常使用单文件组件 (.vue 文件)。一个 .vue 文件是一个自定义的文件格式，它允许你在一个文件中包含组件的模板 (<template>)、JavaScript 逻辑 (<script>) 和样式 (<style>)。这使得组件的代码更加内聚和易于管理。

“`vue

“`

然后在父组件（如 App.vue）中导入和使用它：

“`vue

“`

这种单文件组件 (.vue) 的方式是使用 Vue CLI 进行开发的核心。

13. 构建一个简单的应用示例：任务列表

让我们结合学到的知识，使用 CDN 方式构建一个简单的任务列表应用。

“`html




Vue Task List


Simple Task List



  • {{ task }}

No tasks yet!


“`

示例解释:

  1. v-cloak: 这是 Vue 的一个特殊属性，用于隐藏未编译的 Mustache 标签直到 Vue 实例准备完毕。通过 CSS [v-cloak] { display: none; } 配合使用，可以避免页面加载时短暂显示原始模板语法。
  2. data:
    • newTask: 用于存储用户在输入框中输入的内容，初始化为空字符串。
    • tasks: 用于存储所有的任务，初始化为空数组。
  3. form @submit.prevent="addTask":
    • 监听表单的 submit 事件。
    • .prevent 修饰符阻止表单提交时页面的默认刷新行为。
    • 调用 addTask 方法来处理任务添加逻辑。
  4. input v-model="newTask":
    • 在输入框和 newTask 数据属性之间建立双向绑定。用户输入内容会自动更新 newTask。
  5. ul > li v-for="(task, index) in tasks" :key="index":
    • 使用 v-for 遍历 tasks 数组，为每个任务渲染一个 <li>。
    • task 是当前迭代到的任务字符串，index 是其索引。
    • :key="index" 使用索引作为 key。在这个简单的例子中，使用索引是可以接受的，但对于更复杂的列表操作（如排序、过滤），使用数据的唯一 ID 作为 key 会更好。
  6. {{ task }}: 在 <li> 中显示当前任务的内容。
  7. button @click="removeTask(index)":
    • 为每个任务项添加一个“移除”按钮。
    • 监听按钮的 click 事件。
    • 调用 removeTask 方法，并将当前任务的 index 作为参数传递。
  8. p v-if="tasks.length === 0":
    • 使用 v-if 条件渲染一个段落，只在 tasks 数组为空时显示“No tasks yet!”。
  9. methods:
    • addTask: 检查 newTask 是否非空，如果非空则将其添加到 tasks 数组末尾，然后清空 newTask。trim() 用于去除输入框首尾的空白字符。this.tasks.push() 是一个响应式的数组方法，Vue 会检测到并更新视图。
    • removeTask: 使用 this.tasks.splice(index, 1) 方法移除指定索引的元素。splice() 也是一个响应式的数组方法。

通过这个简单的示例，我们结合使用了 data、methods、v-model、v-on (@submit.prevent, @click)、v-for、v-if 等核心概念，构建了一个功能完整的响应式应用。

14. 进阶之路：下一步学习什么？

恭喜你！通过阅读这篇指南，你已经掌握了 Vue 2 的核心概念和基本用法。但这仅仅是开始。为了构建更大型、更复杂的应用，你需要继续学习以下内容：

  • Vue Router: 用于构建单页应用 (SPA) 时的路由管理。学习如何配置路由，实现页面间的跳转和导航。
  • Vuex: Vue 官方的状态管理库。当你的应用变得复杂，多个组件需要共享和管理状态时，Vuex 提供了集中式的状态管理方案。
  • 组件进阶: 更深入地学习组件的 Props 验证、非 Prop 属性、自定义事件的最佳实践、插槽 (Slots) 用于内容分发、动态组件、异步组件等。
  • 混合 (Mixins): 用于复用组件选项。
  • 自定义指令 (Custom Directives): 学习如何创建自己的指令来操作 DOM。
  • 插件 (Plugins): 学习如何使用或创建 Vue 插件来扩展 Vue 的功能。
  • 渲染函数 (Render Functions) & JSX: 了解 Vue 底层的渲染机制，在某些特定场景下可能需要手动编写渲染函数。
  • 服务端渲染 (SSR) & Nuxt.js: 学习如何在服务器端预渲染 Vue 应用，提升首屏加载性能和 SEO。Nuxt.js 是一个流行的基于 Vue 的 SSR 框架。
  • 测试: 学习如何为 Vue 组件编写单元测试。
  • TypeScript: 在 Vue 项目中使用 TypeScript，提升代码的可维护性和开发效率。
  • 最佳实践与性能优化: 学习如何编写高效的 Vue 代码，避免常见陷阱，优化应用性能。
  • Vue 3: 了解 Vue 3 的新特性和变化（如 Composition API, Proxy 响应式系统, Teleport, Fragments 等），为将来迁移或学习新项目做准备。虽然本篇是关于 Vue 2 的，但 Vue 3 是未来趋势。

资源推荐：

  • Vue.js 官方文档 (cn.vuejs.org): 这是最权威、最详尽的学习资源。当你遇到问题或想深入了解某个特性时，优先查阅官方文档。
  • Vue Mastery (vuemastery.com): 官方推荐的视频教程平台，提供高质量的 Vue 学习内容（部分收费）。
  • 各类在线课程平台: Coursera, Udemy, B站, 慕课网等都有大量的 Vue 课程。
  • GitHub 上的开源 Vue 项目: 阅读和学习优秀的开源项目代码是提升技能的有效方式。

结语

恭喜你阅读完了这篇 Vue 2 入门指南！我们从 Vue 的基本概念开始，一步步学习了数据绑定、指令、组件、生命周期等核心知识，并通过一个简单的任务列表示例将这些知识串联起来。

Vue 2 是一个非常成熟、稳定且功能强大的框架，它在许多现有的和新的项目中都得到了广泛的应用。掌握 Vue 2 将为你的前端开发之路打开新的大门。

学习任何新技术都需要不断地实践。现在，是时候自己动手，尝试修改示例代码，或者开始构建自己的小应用了。在实践中遇到问题，查阅官方文档、搜索解决方案、向社区提问，这些都是进步的必经之路。

祝你在 Vue 的世界里开发愉快！

发表评论

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

滚动至顶部