[js高手之路] vue系列教程 - vue的基本用法与常见指令(1)

本系列课程选用vue的版本为1.0.21，

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

具体怎么读取呢？

 <div id="box">
     {{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 id="box2">{{msg}}</p>
 <div id="box">
     {{content}}
     <br>
     {{msg}}
     <br>
     {{msg2}}
 </div>
  <div id="box3">{{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" id="txt" />
     <input type="text" v-model="msg" id="txt2"/>
     <br/>
     {{msg}}
     <div class="box">
         {{msg}}
     </div>
     <div class="box">
         {{msg}}
     </div>
     <div class="box">
         {{msg}}
     </div>
     <div class="box">
         {{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 id="box">
     <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也可以循环数组

         window.onload = function () {
             var c = new Vue({
                 el : '#box',
                 data : {
                     arr : [ '张三', 100, '李四', 200 ]
                 }
             });
         }

 <ul id="box">
     <li v-for="value in arr">{{value}}</li>
 </ul>

输出结果：

• 张三
• 100
• 李四
• 200

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

 <ul id="box">
     <li v-for="value in arr">{{value}}----{{$index}}</li>
 </ul>

输出结果：

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

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

         window.onload = function () {
             var c = new Vue({
                 el : '#box',
                 data : {
                     persons : {
                         name1 : "八戒",
                         name2 : "悟空",
                         name3 : "唐僧"
                     }
                 }
             });
         }

 <ul id="box">
     <li v-for="value in persons">{{value}}---{{$index}}----{{$key}}</li>
     <hr/>
     <li v-for="value in persons">{{value}}---{{$index}}----{{$key}}</li>
     <hr/>
     <li v-for="(k,v) in persons">{{k}}----{{v}}---{{$index}}---{{$key}}</li>
 </ul>

输出结果：

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

---

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

---

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