初入 Vue 的世界 Say Hello

上一回：Vue 与 MVVM 之间那些事儿

书接上文，上一回我们说到了 Vue 框架和 MVVM 模式之间的那些事儿。知道了 Vue 实际上是经典的 MVVM 模式的框架，而且充当了 MVVM 中的 ViewModel 层，使得我们开发时只须要关注 View 层和 Model 层就能够了。

接下来，我们就来编写真正意义上的第一个 Vue 示例吧。

---

使用 Vue 框架，我们能够把它分红三个步骤：

1. 在 HTML 网页中引入 Vue 框架的核心库
2. 编写做为 View 层的 HTML 代码
3. 编写做为 Model 层的 JavaScript 逻辑

下面，我们就根据这三步来编写第一个 Vue 的示例代码。

<!-- 1.引入Vue文件 -->
<script src="scripts/vue.js"></script>
<!-- 2.编写View层的HTML -->
<div id="app">{{ message }}</div>
<script>
    // 3.编写Model层的JavaScript逻辑
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
</script>
复制代码

上面这段代码中，我们首先须要来介绍一下核心的内容，就是下面这段代码：

// 建立Vue的实例对象，而且传递必要的参数便可
let app = new Vue({
    el: '#app'// 将当前的数据关联到HTML元素
});
复制代码

new Vue() 建立一个 Vue 的实例对象，构造函数 Vue() 接收一个 Object 类型的参数。其中 el 选项是用来和 HTML 网页中的元素进行关联的，值能够是 CSS 选择器，也能够是 HTMLElement 实例。

简单吧？！是否是以为很像 jQuery 吖？！

声明式渲染

在这个示例代码中，我们用了 Vue 框架比较核心的内容就是声明式渲染。声明式渲染就是 Vue 框架提供给我们完成 View 层的 HTML 网页数据填充的，就是经过一个简单的模板语法，好比 {{ message }} ，声明式地把数据经过 DOM 结构渲染到 HTML 网页中。

<div id="app">{{ message }}</div>
复制代码

而后，经过 Vue() 构造函数的 data 选项设置数据内容。

let app = new Vue({
  el: '#app’, data: { message: 'Hello Vue.js!’
  }
});
复制代码

这里我们得说明一点，就是模板语法的 {{ message }} 中的 message 是必须和 Vue() 构造函数中 data 选项的 message 保持一致的。否则，我们是得不到正确的效果的！

作到这儿，我们就作到了把数据和 DOM 结构进行了关联。不只如此，这些数据渲染都是响应式的。这时候你可能在想，啥是响应式的？

就是这样的示例代码，我们运行浏览器，打开开发者工具以后，在控制台（console）修改 app.message 的值，相应 HTML 网页的模板语法渲染的数据也会变化。

下一回：速看Vue世界的生命轮回