简介
如果说轻量级框架Jquery是使用JS对网页的修修补补的话，Vuejs就好像让你开高达。你的所有页面视图代码将首先交给Vuejs框架进行预处理，然后通过Vuejs渲染为终的网页。因此，通过操作Vuejs框架中的数据，就可以实现对网页显示的动态更新。

这样的一种逻辑模式，被称为MVVM，即Model-View-ViewModel，通过Vuejs框架把核心数据模型和视图相连接，实现自然而高效的应用交互。

举个例子，如果你在做一个电商网页，要实现用户把商品添加进入购物车这个功能。在这里，购物车中的货物数据就是核心数据模型（model），而我们网页上购物车列表等呈现给用户看的HTML元素就是视图（view）。我们的Vuejs框架所做的，就是维持核心数据和视图的统一，但你改变购物车货物的数据时，网页上购物车列表的内容也会被更新。

Vuejs其实还支持组件化，所以成为渐进式的框架，你可以通过拼装组件来实现整个应用的构建。

下面让我们看一看，Vuejs是如何使用的。

Hello Vue!
现在我们又要拿出sublime啦！打开之前玩耍过的index.html所在的文件夹，在HTML文件中写入如下内容（完整代码哦）：


接下来打开index.js并写入如下内容：

接下来使用浏览器打开index.html，就会发现，页面上并没有显示两个大括号，而是显示出了Hello Vue！这是为什么呢？让我们来学习一下上面代码的工作原理吧：

HTML代码第5行：引入Vuejs库。加载JS库通常被放在head元素中。在通常的网页上，我们往往使用公共CDN引入想要的JS库（这里使用了jsdelivr）。公共CDN就是给大家免费提供库的快速加载的网络服务。
HTML代码倒数第3行：引入我们自己写的脚本文件。通常自己的JS代码在body元素的后引入，这是为了等待页面元素加载完全，让JS能够正常工作。
<div id="app">：在这里我们定义了一个具有属性id="app"的块元素，这也是Vuejs应用常用的写法。
JS代码第1行：新建Vue对象。因为引入了Vuejs库，我们可以新建一个Vue对象。变量名通常叫app，下面的内容都是新建的Vue对象的