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

具體怎麼讀取呢？

1 <div id="box">
2     {{content}}
3     <br>
4     {{msg}}
5     <br>
6     {{msg2}}
7 </div>

{{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 <p id="box2">{{msg}}</p>
2 <div id="box">
3     {{content}}
4     <br>
5     {{msg}}
6     <br>
7     {{msg2}}
8 </div>
9  <div id="box3">{{msg2}}</div> 

指令：v-model  作用：實現數據的雙向驅動

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

 1     <input type="text" v-model="msg" id="txt" />
 2     <input type="text" v-model="msg" id="txt2"/>
 3     <br/>
 4     {{msg}}
 5     <div class="box">
 6         {{msg}}
 7     </div>
 8     <div class="box">
 9         {{msg}}
10     </div>
11     <div class="box">
12         {{msg}}
13     </div>
14     <div class="box">
15         {{msg}}
16     </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中可以定義哪些數據？

常見的字元串，整形數字，數組，布爾，對象類型都可以

 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}} <br/>
2     {{msg2}} <br/>
3     {{arr}} <br/>
4     {{flag}} <br/>
5     {{json}}<br/>
6     {{num}}<br/>

輸出結果：

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 <div id="box">
2     <ul>
3         <li v-for="value in persons">{{value}}</li>
4     </ul>
5     <ul>
6         <li v-for="a in persons">{{a}}</li>
7     </ul>
8 </div>

輸出結果:

• 八戒
• 沙增
• 悟空

• 八戒
• 沙增
• 悟空

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 <ul id="box">
2     <li v-for="value in arr">{{value}}</li>
3 </ul>

輸出結果：

• 張三
• 100
• 李四
• 200

如果需要獲取當前數組項的索引，可以用{{$index}}

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

輸出結果：

• 張三----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 <ul id="box">
2     <li v-for="value in persons">{{value}}---{{$index}}----{{$key}}</li>
3     <hr/>
4     <li v-for="value in persons">{{value}}---{{$index}}----{{$key}}</li>
5     <hr/>
6     <li v-for="(k,v) in persons">{{k}}----{{v}}---{{$index}}---{{$key}}</li>
7 </ul>

輸出結果：

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

---

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

---

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