首先介绍一下vue.js和其他页面需要用到或者可能用到的插件（这里我多引用了bootstrap和jquery）。注意文件的路径，这样准备工作就基本完成了，下面我们正式开始上手。vue.js最重要的特性之一就是双向数据绑定，也就是我们常说的MVVM：Model-View-ViewModel。要想实现双向绑定，首先要有“双向”。在这里，vue.js为我们提供了一个View层和一个Model层。View层是HTML中的代码，Model层是Javascript代码。以下是标记视图层和模型层的开始和结束位置的基本示例代码。在视图层，我们需要创建一个标签来展示程序在模型层运行的结果，我们需要在这个标签上添加一个类或者ID。在此示例中，我将名为app的ID添加到div标签。在模型层是我们要执行的代码。首先，我们需要创建一个新的Vue对象。对象中el对应的值是我们在视图层创建的标签的类名或者ID名（这个标签是Vue对象的作用范围），data对应的值是一个对象，这个中的keyobject是视图层中“{{}}”中的代码，value是显示的结果。下图是运行后的结果。为了方便理解，在下面的代码中，我修改了message的值，在data中添加了一个键值对。这是例子修改后的运行结果。对比代码和运行结果，相信大家可以更清楚地了解vue.js的基本工作原理。接下来，我们将对数据进行双向绑定。在这个例子中，我们添加了一个输入标签，它有一个名为v-model的属性。我们可以清楚的看到v-model属性的值与p标签“{{}}”中的值以及data中的键名相同，这就是我们双向绑定的键。下面是示例3的运行结果，上半部分是p标签显示的内容，下半部分是input标签的内容。这时候我们可以通过修改input的内容来改变p标签中的内容。至此，我们完成了最基本的双向绑定操作。
