开始使用 Vue.js

Vue.js 简介

Vue.js 是一个渐进式框架，用于构建应用程序。Vue.js 以其简洁性著称，学习曲线相比其他框架更为平缓。它能够将 HTML、JavaScript 和 CSS 三种语言整合在同一个文件中使用。Vue 生态系统不断发展，目前 Vue2 和 Vue3 都得到了良好支持。在本课程中，我们将使用 Vue2。

在进入后续内容之前，我们先简要了解一些核心概念，包括：

• 指令（Directives）
• 表单处理
• 类名与样式绑定

让我们运行第一个 Vue.js 应用程序。点击“运行”按钮。

指令

这些是 Vue.js 模板中常用的指令。通常来说，指令是一种特殊的标记，用于告诉库对某个 DOM 元素执行特定操作。

v-if、v-else 与 v-else-if 指令

这些指令用于实现条件渲染。在下面的例子中，只有当用户登录时才会显示用户名；否则显示“Hello World”。如果需要处理多个条件，还可以使用 v-else-if。掌握 v-if、v-else 与 v-else-if 非常重要，因为它们将在开发中频繁使用。

1<template>
2  <!-- 注意这里还使用了 v-else-if -->
3  <div v-if="loading">加载中...</div>
4  <div v-else-if="isLogged">{{ username }}</div>
5  <div>你好世界</div>
6</template>

v-for 指令

v-for 指令非常适合用于渲染列表。在下面的例子中，假设我们有一个包含多个用户的数组，仅需渲染每个用户的用户名，可以使用 v-for 指令来完成。

1<template>
2  <div v-for="(item, index) in items" :key="index">{{ item.username }}</div>
3</template>

v-show 指令

这也是一个用于条件渲染的指令。区别在于，使用 v-show 时，元素始终保留在 DOM 中，但当条件不满足时，会通过 CSS 的 display 属性隐藏内容。例如，当 user-cart 为 false 时，用户购物车的内容仍存在于 DOM 中，但会被隐藏。

1<template>
2  <div v-show="user-cart">用户购物车</div>
3</template>

v-text 与 v-html 指令

这两个指令可用于显示文本内容。以下示例展示了如何渲染文本内容。使用 v-html 可以渲染原始 HTML，而 v-text 用于渲染普通文本。

1<template>
2  <div v-text="item.description"></div>
3  <!-- 或者 -->
4  <div v-html="'<h2>你好世界</h2>'"></div>
5  <!-- 或者 -->
6  <div>{{ item.description }}</div>
7</template>

在下面的练习环境中，我们将综合运用已学过的部分指令。

表单处理

我们可以使用 v-model 指令在表单的 input、textarea 和 select 元素上创建双向数据绑定。在这个例子中，我们使用了以下两个指令：

1. v-on 或 @：用于监听 DOM 事件，并在触发时执行 JavaScript 代码。
2. v-model：用于在表单元素上建立双向数据绑定。

对于表单验证，可以使用 vee-validate、vuevalidate，或自行编写自定义指令。请参考以下示例：

类名与样式绑定

可以在 Vue.js 文件中的 <style> 标签内声明样式。除非指定 scoped，否则 CSS 样式可被其他文件访问。以下是几种在 Vue 文件中声明 CSS 的方式：

1// 使用原生 CSS
2<style lang="css"></style>
3<style lang="css" scoped></style>
4
5// 使用 SCSS
6<style lang="scss"></style>
7<style lang="scss" scoped></style>
8
9// 使用 Less
10<style lang="less"></style>
11<style lang="less" scoped></style>

也可以通过内联样式的方式声明样式，如下所示：

1<template>
2  <div style="background-color: red"></div>
3</template>

下面的例子演示了如何在 Vue.js 中绑定类名和样式。

要创建一个 Vue.js 应用，我们将使用 Vue CLI。Vue CLI 是一套完整的快速开发 Vue.js 的工具系统。通过以下命令可以快速搭建新项目，显著减少开发时间。

安装

在本地机器上全局安装 Vue CLI，请运行以下命令：

1npm install -g @vue/cli @vue/cli-service-global
2# 或
3yarn global add @vue/cli @vue/cli-service-global

安装完成后，使用以下命令创建新项目：

1vue create educative-whatsapp-application

实践练习

现在，让我们通过以下步骤使用 Vue CLI 创建第一个 Vue.js 应用：

1. 点击终端中的“连接”按钮。
2. 安装 Vue CLI。
3. 使用上述命令创建项目。

1// 安装 Vue CLI
2npm install -g @vue/cli @vue/cli-service-global
3
4// 创建项目
5vue create educative-whatsapp-application
6
7// 进入项目并启动应用
8cd educative-whatsapp-application && npm run serve

恭喜！你已经成功配置 Vue.js 并创建了第一个应用。

总结

本课从基础到进阶内容进行了全面介绍，帮助你快速入门 Vue.js。前端开发中很大一部分工作涉及表单、CSS 和条件逻辑，我们已涵盖这些关键点。为了获得更好的效果，建议进一步阅读 Vue.js 文档并多加练习。