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库是最简单直接的方式。

浏览器选择：建议使用现代浏览器（如Chrome、Firefox、Safari等），因为这些浏览器对ES6+语法有较好的支持，而Vue.js大量使用了这些新特性。
创建HTML文件：首先，在你的计算机上创建一个新的文件夹作为项目的工作目录，然后在该文件夹中创建一个HTML文件，比如命名为index.html。
引入Vue.js：在index.html文件的<head>部分或者<body>结束标签之前，通过<script>标签引入Vue.js的CDN链接。Vue.js官方提供了多个版本的CDN链接，包括开发版本（包含有用的警告和调试信息）和生产版本（经过优化，适合部署）。为了学习方便，我们可以先使用开发版本。
```
<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实例。

添加挂载点：在<body>标签内，添加一个<div>元素，并给它一个唯一的id，比如app。这个<div>将作为Vue实例的挂载点，Vue实例管理的DOM将插入到这个元素内部。
```
<div id="app">
  {{ message }}
</div>
```
这里的{{ message }}是Vue.js的插值表达式，用于输出变量message的值。
定义Vue实例：在引入Vue.js的<script>标签之后，再添加一个<script>标签来定义Vue实例。在这个实例中，我们将定义一个名为message的数据属性，并设置其初始值。
```
<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代码：

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应用。但无论你的学习之路走向何方，请记得保持对技术的热情和对知识的渴望，因为这正是推动我们不断前进的力量。