本系列课程选用，

什么是vue?

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的元素下面

具体怎么读取呢？

1 
     
      2     {
    {content}}3     
      
4     {
    {msg}}5     
      
6     {
    {msg2}}7 
     

{

{data中定义的键}}， 如{

{content}} 读取的就是vue实例 data里面的 content定义的值，所以{

{content}}输出 ghostwu tell you how to learn vue， 同理{

{msg}}输出vue中的数据1 ,

{

{msg2}}输出 vue中的数据2

如果我们需要让数据显示在不同的元素下面，可以定义多个vue实例

1         window.onload = function () { 2             var c = new Vue({ 3                 el: '#box', //相当于选择器 4                 data: { 5                     content: 'ghostwu tell you how to learn vue', 6                     msg : 'vue中的数据1', 7                     msg2 : 'vue中的数据2' 8                 } 9             });10            var c2 = new Vue({11                el: '#box2',12                data: {13                    msg: 'this is a paragraphy'14                }15            });16            var c3 = new Vue({17                el: '#box3',18                data: {19                    msg2: 'this is box3'20                }21            });22         }

1 
{
   {msg}}
2 
     
      3     {
    {content}}4     
      
5     {
    {msg}}6     
      
7     {
    {msg2}}8 
     
9  
     
      {
   {msg2}}
     

指令：v-model  作用：实现数据的双向驱动

window.onload = function () {            var c = new Vue({                el: "body",                data: {                    msg: 'welcome to study vue!!!'                }            });        }

1      2      3     
 4     {
    {msg}} 5     
     
       6         {
    {msg}} 7     
     
 8     
     
       9         {
    {msg}}10     
     
11     
     
      12         {
    {msg}}13     
     
14     
     
      15         {
    {msg}}16     
     

上例，如果修改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中可以定义哪些数据？

常见的字符串，整形数字，数组，布尔，对象类型都可以

1          window.onload = function () { 2             var c = new Vue({ 3                 el: 'body', 4                 data: { 5                     msg: 'this is a msg', 6                     msg2 : 'hello world!', 7                     arr : [ 100, 200, 300 ], 8                     flag : true, 9                     json : {10                         key1 : '八戒',11                         key2 : '悟空',12                         key3 : '沙僧'13                     },14                     num : 100,15                 }16             });17         }

1     {
   {msg}} 
2     {
   {msg2}} 
3     {
   {arr}} 
4     {
   {flag}} 
5     {
   {json}}
6     {
   {num}}

输出结果：

this is a msg 

hello world! 

100,200,300 

true 

[object Object]

100

对于json数据，默认情况输出的是object Object，实际使用中，我们肯定是不希望输出这玩意， 所以，vue中提供了一个指令v-for

指令：v-for. 作用：循环数组与对象

1     window.onload = function () { 2             var c = new Vue({ 3                 el: '#box', 4                 data: { 5                     persons: { 6                         name1: '八戒', 7                         name2: '沙增', 8                         name3: '悟空' 9                     }10                 }11             });12         }

1 
     
      2     
      
       3         
       
{
   {value}}
4     
      
5     
      
       6         
       
{
   {a}}
7     
      
8 
     

输出结果:

• 八戒
• 沙增
• 悟空

• 八戒
• 沙增
• 悟空

v-for指令中， in前面的变量，就是当前需要输出persons的每一项的值，他的名称可以自定义.

v-for也可以循环数组

1         window.onload = function () {2             var c = new Vue({3                 el : '#box',4                 data : {5                     arr : [ '张三', 100, '李四', 200 ]6                 }7             });8         }

1 
     
      2     
      
{
   {value}}
3 
     

输出结果：

• 张三
• 100
• 李四
• 200

如果需要获取当前数组项的索引，可以用{

{$index}}

1 
     
      2     
      
{
   {value}}----{
   {$index}}
3 
     

输出结果：

• 张三----0
• 100----1
• 李四----2
• 200----3

v-for还有另外几种形式，输出数组:

 

1         window.onload = function () { 2             var c = new Vue({ 3                 el : '#box', 4                 data : { 5                     persons : { 6                         name1 : "八戒", 7                         name2 : "悟空", 8                         name3 : "唐僧" 9                     }10                 }11             });12         }

1 
     
      2     
      
{
   {value}}---{
   {$index}}----{
   {$key}}
3     
      
4     
      
{
   {value}}---{
   {$index}}----{
   {$key}}
5     
      
6     
      
{
   {k}}----{
   {v}}---{
   {$index}}---{
   {$key}}
7 
     

输出结果：

• • 八戒---0----name1
  • 悟空---1----name2
  • 唐僧---2----name3

---

• • 八戒---0----name1
  • 悟空---1----name2
  • 唐僧---2----name3

---

• name1----八戒---0---name1
• name2----悟空---1---name2
• name3----唐僧---2---name3