1.5 第一个Vue.js程序-Vue.js从入门到精通(一)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(一)

### 1.5 第一个Vue.js程序

在踏入Vue.js的奇妙世界之前，亲手编写并运行你的第一个Vue.js程序无疑是一个激动人心的时刻。这不仅能让你对Vue.js的基本结构和工作方式有一个直观的感受，还能为后续深入学习打下坚实的基础。本章节将引导你一步步创建并理解你的第一个Vue.js程序，从环境准备到代码编写，再到程序运行，全程详尽解析。

#### 1.5.1 环境准备

在开始编写Vue.js程序之前，确保你的开发环境已经配置妥当。Vue.js是一个渐进式JavaScript框架，它可以在多种环境中运行，包括但不限于浏览器、Node.js环境等。但对于初学者而言，直接在浏览器中通过`<script>`标签引入Vue.js库是最简单直接的方式。

1. **浏览器选择**：建议使用现代浏览器（如Chrome、Firefox、Safari等），因为这些浏览器对ES6+语法有较好的支持，而Vue.js大量使用了这些新特性。

2. **创建HTML文件**：首先，在你的计算机上创建一个新的文件夹作为项目的工作目录，然后在该文件夹中创建一个HTML文件，比如命名为`index.html`。

3. **引入Vue.js**：在`index.html`文件的`<head>`部分或者`<body>`结束标签之前，通过`<script>`标签引入Vue.js的CDN链接。Vue.js官方提供了多个版本的CDN链接，包括开发版本（包含有用的警告和调试信息）和生产版本（经过优化，适合部署）。为了学习方便，我们可以先使用开发版本。

```html
   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
   ```

注意：上述链接是Vue 2.x版本的示例，如果你在学习Vue 3.x，请替换为相应版本的CDN链接。

#### 1.5.2 编写Vue实例

Vue.js的核心是一个允许你采用声明式将数据渲染进DOM的系统。Vue.js通过创建一个新的Vue实例来启动这个过程。在`index.html`文件中，你可以添加一个`<div>`元素作为Vue实例的挂载点，并通过JavaScript代码来定义这个Vue实例。

1. **添加挂载点**：在`<body>`标签内，添加一个`<div>`元素，并给它一个唯一的id，比如`app`。这个`<div>`将作为Vue实例的挂载点，Vue实例管理的DOM将插入到这个元素内部。

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

这里的`{{ message }}`是Vue.js的插值表达式，用于输出变量`message`的值。

2. **定义Vue实例**：在引入Vue.js的`<script>`标签之后，再添加一个`<script>`标签来定义Vue实例。在这个实例中，我们将定义一个名为`message`的数据属性，并设置其初始值。

```html
   <script>
     var app = new Vue({
       el: '#app', // 指定Vue实例挂载的元素
       data: {
         message: 'Hello Vue.js!' // 定义数据属性
       }
     });
   </script>
   ```

在上述代码中，`el`属性指定了Vue实例挂载的DOM元素选择器（这里是`#app`），`data`对象则包含了Vue实例的响应式数据。

#### 1.5.3 运行你的Vue.js程序

完成上述步骤后，你的第一个Vue.js程序就已经编写完成了。现在，你可以通过任何现代浏览器来打开`index.html`文件，查看程序的运行结果。浏览器将显示`Hello Vue.js!`，这正是你在Vue实例中定义的`message`属性的值。

#### 1.5.4 深入理解Vue.js的响应式系统

Vue.js的魔力很大程度上来源于其响应式系统。当你修改了Vue实例中`data`对象的属性时，Vue会自动更新DOM以反映这些变化。这种响应式更新是自动且高效的，它依赖于Vue内部使用的依赖追踪和脏检查机制。

为了更深入地理解这一点，你可以尝试在浏览器的开发者工具（通常可以通过按F12打开）的Console面板中修改Vue实例的`message`属性，并观察页面上文本的变化。例如，你可以执行以下JavaScript代码：

```javascript
app.message = 'Hello, Vue.js World!';
```

执行后，你会发现页面上原本显示的`Hello Vue.js!`被替换成了`Hello, Vue.js World!`。这就是Vue.js响应式系统的魅力所在。

#### 1.5.5 小结

通过本章节的学习，你已经成功创建了你的第一个Vue.js程序，并亲身体验了Vue.js的响应式系统。在这个过程中，你不仅学会了如何在HTML文件中引入Vue.js库，还掌握了如何定义Vue实例、设置数据属性以及如何通过插值表达式将数据渲染到DOM中。这些都是Vue.js开发的基础，也是后续学习更高级特性的重要前提。

接下来，随着你对Vue.js的深入学习，你将接触到更多强大的功能，如组件系统、指令集、路由管理、状态管理等，这些都将帮助你构建出更加复杂、高效且易于维护的Web应用。但无论你的学习之路走向何方，请记得保持对技术的热情和对知识的渴望，因为这正是推动我们不断前进的力量。

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(四)

Vue源码完全解析

VUE组件基础与实战

TypeScript和Vue从入门到精通(一)

Vue.js从入门到精通(二)

Vue面试指南

Vue.js从入门到精通(四)

Vue原理与源码解析

vue项目构建基础入门与实战

移动端开发指南

vuejs组件实例与底层原理精讲

TypeScript和Vue从入门到精通(三)