最近公司的H5项目准备重构，部门老大说前端使用vue2.0来开发，所以就准备把整个项目的开发过程记录下来，一方面是为了记录开发过程中遇到的坑，另一方面也加强自己写作的能力。
什么是 Vue？
简要介绍一下vue，vue就是一个前端框架，特点是 数据双向绑定，比如说改变input输入框里的内容，就会自动同步更新到页面上绑定该输入框的组件的值。
看一下官方对vue的介绍：
Vue.js，读音 /vjuː/，和view发音几乎一样，可见重心是在视图（view）层上的。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
其和jQuery最大的不同点在于jQuery通过操作DOM来改变页面的显示，而Vue通过操作数据来实现页面的更新与展示。下面便是Vue数据驱动的概念模型：
Vue.js主要负责的是上图绿色正方体ViewModel的部分，其在View层（即DOM层）与Model层（即JS逻辑层）之间通过ViewModel绑定了DOM Listeners与Data Bingings两个相当于监听器的东西。
当View层的视图发生改变时，Vue会通过DOM Listeners来监听并改变Model层的数据。相反，当Model层的数据发生改变时，其也会通过Data Bingings来监听并改变View层的展示。这样便实现了一个双向数据绑定的功能，也是Vue.js数据驱动的原理所在。
首先我们来写一个hello word！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://www.jb51.net/article/vue.js"></script> </head> <body> <div> {{message}} </div> </body> <script> var app = new Vue({ el: '#app', data: { message:'Hello world!' } }) </script> </html>
看似很简单的实现一个字符串的渲染，其实vue在背后做了很多的操作，通过vue，现在数据和DOM已经被绑定到了一块，我们可以通过app.message来修改内容，我们可以看到页面的内容也相应进行了更新。
构造器
我们会发现每个页面都会new一个Vue，因为每个vue.js应用都是通过构造函数Vue创建一个Vue的根实例也就是这里所说的构造器。在实例化Vue时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在API 文档中查看。
vue指令
在Vue项目的开发中，我们使用的最多的应该就属Vue的指令了。通过Vue提供的常用指令，我们可以淋漓尽致地发挥Vue数据驱动的强大功能。以下便是常用指令的简单介绍：
（1）v-text: 用于更新绑定元素中的内容，类似于jQuery的text()方法
（2）v-html: 用于更新绑定元素中的html内容，类似于jQuery的html()方法
（3）v-if: 用于根据表达式的值的真假条件渲染元素，如果上图P3为false则不会渲染P标签
（4）v-show: 用于根据表达式的值的真假条件显示隐藏元素，切换元素的 display CSS 属性
（5）v-for: 用于遍历数据渲染元素或模板，如图中P6为[1,2,3]则会渲染3个P标签，内容依次为1，2，3
（6）v-on: 用于在元素上绑定事件，图中在P标签上绑定了showP3的点击事件
关于更多的Vue指令可以查看Vue2.0文档，地址：
属性与方法
在每个 Vue 实例中都会代理其 data 对象里所有的属性。
var data = { a: 1 } var vm = new Vue({ data: data }) vm.a === data.a // -> true // 设置属性也会影响到原始数据 vm.a = 2 data.a // -> 2 // ... 反之亦然 data.a = 3 vm.a // -> 3
除了 data 属性,Vue实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。具体请查阅中的实例属性一节。
MVC & MVVM
MVC是一种在后端开发中广泛采用的架构模式，几乎所有的知名后端框架都是传统 MVC 的实现，由于其中的 一些小差异，也可以被叫做 MV*
MVC模式的意思是，软件可以分成三个部分。
视图（View）：用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据保存
各部分之间的通信方式如下：
View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈所有通信都是单向的
MVVM，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。
