Vue.js 基础教程

第 2.1 节：创建您的第一个 Vue.js 应用程序

现在您已经设置了开发环境，是时候深入研究 Vue.js 并创建您的第一个应用程序了。 在本章中，我们将介绍 Vue.js 的基本构建块，并指导您完成创建简单 Vue.js 应用程序的过程。

第 2.1.1 节：将 Vue.js 添加到您的项目中

首先，确保您有一个要添加 Vue.js 的 HTML 文件。 您可以创建一个新的 HTML 文件，也可以使用现有的文件。 要添加 Vue.js，请按照下列步骤操作：

1. 包含 Vue.js 库：从官方网站下载 Vue.js 库，或者通过将以下脚本标记添加到 HTML 文件来直接从内容分发网络 (CDN) 包含它：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. 创建 Vue 实例：在 HTML 文件中，在 Vue.js 脚本标签下方添加脚本标签。 在 script 标签内，通过调用 Vue 构造函数创建一个新的 Vue 实例：

<script>  var app = new Vue({    // Vue options go here  });</script>

第 2.1.2 节：了解 Vue 实例

Vue 实例充当 Vue.js 应用程序的基础。 它充当入口点并控制应用程序的行为。 现在让我们探讨一下 Vue 实例的一些关键方面：

1. 数据：Vue 实例的“data”属性定义了将响应的数据。 这些数据属性可以在 Vue 实例的模板或方法中访问和操作。

2. 模板：`template` 属性定义表示视图的标记。 您可以在模板中使用特定于 HTML 和 Vue 的语法来根据数据呈现动态内容。

3.挂载：Vue实例需要挂载到HTML文件中的某个元素上。 使用 el 属性指定要挂载 Vue 实例的元素的 CSS 选择器：

var app = new Vue({  el: '#app',  // ...});

4. 插值：Vue.js 提供了一种使用双大括号 (`{{ }}`) 将数据插值到模板中的便捷方法。 在模板内部，您可以使用“{{ }}”语法访问 Vue 实例中定义的数据属性。

第 2.1.3 节：指令和数据绑定

指令是以“v-”前缀开头的特殊属性，用于将动态行为应用于模板中的元素。 Vue.js 提供了广泛的指令来实现数据绑定和操作。 以下是一些常用的指令：

1. `v-bind`：`v-bind` 指令允许您将元素的属性绑定到 Vue 实例中的数据属性。 它对于根据数据的变化动态更新属性非常有用。

2. `v-model`：`v-model` 指令提供表单输入和 Vue 实例数据之间的双向数据绑定。 它自动将输入值与数据属性同步，使您可以轻松处理用户输入。

3. `v-if` 和 `v-show`：`v-if` 和 `v-show` 指令用于条件渲染。 它们控制是否应根据条件呈现或显示元素。

第 2.2 节：创建您的第一个 Vue.js 应用程序

现在我们已经了解了基础知识，让我们创建一个简单的 Vue.js 应用程序来将我们的知识付诸实践。 按着这些次序：

1. 在您要渲染 Vue.js 应用程序的 HTML 文件中添加一个 HTML 元素。 给它一个 id 属性来识别它：

<div id="app">  {{ message }}</div>

2.更新Vue实例以绑定data属性并将其挂载到指定`id`的元素上：

<script>  var app = new Vue({    el: '#app',    data: {      message: 'Hello, Vue!'    }  });</script>

3. 保存 HTML 文件并在 Web 浏览器中打开它。 您应该看到文本“Hello, Vue!” 呈现在页面上。 恭喜！ 您已成功创建您的第一个 Vue.js 应用程序。

在本章中，我们介绍了在项目中设置 Vue.js 以及使用 Vue 实例、指令和数据绑定创建简单应用程序的过程。 在下一章中，我们将探索 Vue 组件并学习如何构建可重用和模块化的 UI 元素。