上一节我们介绍了Vue.js框架，这一节，我们可以来试着动手写点小代码了。

1 简易安装

要使用Vue.js，我们得先把它安装到我们的项目中，说明了简易安装，我们讲解的肯定是最简单的方法，先不管那些高大上的费时间的安装方法，直接引入一个js文件，先把代码敲代码再说。

这样，我们就成功地用最简单的方法把Vue.js引入到我们的项目中了。至于那些高大上的npm，Bower等花式安装方法，我们后期再看它。

2 数据驱动视图

引入之后，我们就可以把它用起来。听说它最牛逼的地方是数据驱动视图，解放DOM操作，让你不再做又复杂又耗性能的DOM操作。那么，我们就看看它是怎么玩的！

假设，我们现在要把js对象中的某个变量的值渲染在页面上，传统的做法，就是先用getElementById获取到DOM节点对象，再innerHTML设置它的内容。

现在，在Vue.js中，你需要这样做：

我们通过new Vue( )创建一个实例vm，参数是一个json对象，属性el提供一个在页面上存在的DOM 元素(id='app')，表明这个实例是关联指定的DOM节点。

在DOM节点上，我们就可以使用双大括号{{ }}的语法来渲染Vue实例对象data中已经存在的属性值，如上面案例中的name属性的值“web前端教程”就会被渲染到页面中，替换{{ name }} 显示效果为：“web前端教程”。

在此过程中，我们并没有写过操作DOM节点的代码，而且，上一节我们讲过，MVVM模式中的viewmodel充当着监控者的角色，假如它监控到model数据发生了变化，便会通知view视图进行更新，这个过程并不需要你去参与。

我们来试试看，我们把name中的值改成：“hello word”，再不添加任何代码的情况下，页面视图是否会自动更新。

看下面的gif动图，我们通过chrome浏览器演示一下：

如上图所示，一旦name的值被改变了，页面上立马跟着发生了变化，而不需要你再写innerHTML去更新视图了。

这就是Vue.js的数据驱动视图。

3 双向绑定

更方便的是，Vue.js还提供了方便的语法指令，实现视图和数据的双向绑定，也就是说，不但数据变化了可以驱动视图，用户在页面上做了一些操作，也很方便地实现更新model层的数据。

例子：监听用户在页面输入框输入的内容，然后将其实时更新在页面上。

在Vue中我们使用v-model指令就可以轻松实现。（v-model是什么东西，先不用管，后面会有章节详细介绍）。