Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。Vue尽可能通过简单的API实现响应的数据绑定和组合的视图组件。
vue是由尤雨溪开发的一款基于MVVM的框架，M->模型，V->视图， 也就是说模型数据改变了，视图也跟着改变， 视图内容改变，模型内容也跟着改变， 业界称之为双向绑定，或者说双向数据驱动，基于此特点，学习这个框架，跟jquery完全不同， 不要用DOM的思想来学习vue, 在vue里面几乎不需要用到DOM操作，一切都是基于数据驱动.
如何使用vue?
现在vue已经发布了2版本，为什么学1版本，如果想要深入的学习vue，了解和掌握个版本的异同是很有必要的。要想使用vue,首先必须引入vue，在客户端(浏览器)可以通过script标签引入，如果是服务端，通过import引入
一个基本的vue程序有哪些部分组成？
就像初学者学习jquery一样，一个基本的jquery程序， 有 domReady, 选择器，this绑定，事件绑定，属性和样式修改组成的，而vue的基本结构如下：
window.onload = function () { var c = new Vue({ el: '#box', //相当于选择器 data: { content: 'ghostwu tell you how to learn vue', msg : 'vue中的数据1', msg2 : 'vue中的数据2' } }); }
这段简单的代码，可以实现最基本的数据读取和显示功能.
1，使用vue，先要实例化一个vue
2,构造函数中，传入字面量对象， data后面也是一个字面量对象，里面的数据可以自定义，按照json的格式
3,el: 表示要把data中的数据显示在 el 后面跟的元素下面， 比如上面的例子， 就是把data中, content, msg, msg2的数据显示在id 为 box的元素下面
具体怎么读取呢？
<div> {{content}} <br> {{msg}} <br> {{msg2}} </div>
{{data中定义的键}}， 如{{content}} 读取的就是vue实例 data里面的 content定义的值，所以{{content}}输出 ghostwu tell you how to learn vue， 同理{{msg}}输出vue中的数据1 ,
{{msg2}}输出 vue中的数据2
如果我们需要让数据显示在不同的元素下面，可以定义多个vue实例
window.onload = function () { var c = new Vue({ el: '#box', //相当于选择器 data: { content: 'ghostwu tell you how to learn vue', msg : 'vue中的数据1', msg2 : 'vue中的数据2' } }); var c2 = new Vue({ el: '#box2', data: { msg: 'this is a paragraphy' } }); var c3 = new Vue({ el: '#box3', data: { msg2: 'this is box3' } }); } <p>{{msg}}</p> <div> {{content}} <br> {{msg}} <br> {{msg2}} </div> <div>{{msg2}}</div>
指令：v-model 作用：实现数据的双向驱动
window.onload = function () { var c = new Vue({ el: "body", data: { msg: 'welcome to study vue!!!' } }); } <input type="text" v-model="msg" /> <input type="text" v-model="msg"/> <br/> {{msg}} <div> {{msg}} </div> <div> {{msg}} </div> <div> {{msg}} </div> <div> {{msg}} </div>
上例，如果修改data中msg的值，那么输入框中v-model绑定的msg, 以及4个div中输出的msg的值 都会随着data中msg的值的变化而变化，这个就叫做M->V，模型M(data中的数据),
视图V(html代码). 模型改变，视图V也跟着改变， 同样的上面两个input输入框中的值任何一个改变了，data中的msg也会改变，4个div中的msg也跟着改变，这个就叫做V->M，视图改变，模型数据也跟着改变.
data中可以定义哪些数据？
常见的字符串，整形数字，数组，布尔，对象类型都可以
window.onload = function () { var c = new Vue({ el: 'body', data: { msg: 'this is a msg', msg2 : 'hello world!', arr : [ 100, 200, 300 ], flag : true, json : { key1 : '八戒', key2 : '悟空', key3 : '沙僧' }, num : 100, } }); } {{msg}} <br/> {{msg2}} <br/> {{arr}} <br/> {{flag}} <br/> {{json}}<br/> {{num}}<br/>
输出结果：
this is a msg hello world! 100,200,300 true [object Object] 100
对于json数据，默认情况输出的是object Object，实际使用中，我们肯定是不希望输出这玩意， 所以，vue中提供了一个指令v-for
指令：v-for. 作用：循环数组与对象
window.onload = function () { var c = new Vue({ el: '#box', data: { persons: { name1: '八戒', name2: '沙增', name3: '悟空' } } }); } <div> <ul> <li v-for="value in persons">{{value}}</li> </ul> <ul> <li v-for="a in persons">{{a}}</li> </ul> </div>
输出结果:
八戒
沙增
悟空
八戒
沙增
悟空
v-for指令中， in前面的变量，就是当前需要输出persons的每一项的值，他的名称可以自定义.
v-for也可以循环数组