Vue--基礎2

阿新 • • 發佈：2020-09-12

4. 通過axios實現資料請求

vue.js預設沒有提供ajax功能的。

所以使用vue的時候，一般都會使用axios的外掛來實現ajax與後端伺服器的資料互動。

注意，axios本質上就是javascript的ajax封裝，所以會被同源策略限制。

下載地址：

https://unpkg.com/[email protected]/dist/axios.js
https://unpkg.com/[email protected]/dist/axios.min.js

axios提供傳送請求的常用方法有兩個：axios.get() 和 axios.post() 。

增 post

刪 delete

改 put

查 get

	// 傳送get請求
    // 引數1: 必填，字串，請求的資料介面的url地址，例如請求地址：http://www.baidu.com?id=200
    // 引數2：可選，json物件，要提供給資料介面的引數
    // 引數3：可選，json物件，請求頭資訊
	axios.get('伺服器的資源地址',{ // http://www.baidu.com
    	params:{
    		引數名:'引數值', // id: 200,
    	}
    
    }).then(function (response) { // 請求成功以後的回撥函式
    		console.log("請求成功");
    		console.log(response);
    
    }).catch(function (error) {   // 請求失敗以後的回撥函式
    		console.log("請求失敗");
    		console.log(error.response);
    });

	// 傳送post請求，引數和使用和axios.get()一樣。
    // 引數1: 必填，字串，請求的資料介面的url地址
    // 引數2：必填，json物件，要提供給資料介面的引數,如果沒有引數，則必須使用{}
    // 引數3：可選，json物件，請求頭資訊
    axios.post('伺服器的資源地址',{
    	username: 'xiaoming',
    	password: '123456'
    },{
        responseData:"json",
    })
    .then(function (response) { // 請求成功以後的回撥函式
      console.log(response);
    })
    .catch(function (error) {   // 請求失敗以後的回撥函式
      console.log(error);
    });

	
	// b'firstName=Fred&lastName=Flintstone'

4.1 json

json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript物件表示法，這裡說的json指的是類似於javascript物件的一種資料格式。

json的作用：在不同的系統平臺，或不同程式語言之間傳遞資料。

4.1.1 json資料的語法

json資料物件類似於JavaScript中的物件，但是它的鍵對應的值裡面是沒有函式方法的，值可以是普通變數，不支援undefined，值還可以是陣列或者json物件。

// json資料的物件格式：
{
    "name":"tom",
    "age":18
}

// json資料的陣列格式：
["tom",18,"programmer"]

複雜的json格式資料可以包含物件和陣列的寫法。

{
  "name":"小明",
  "age":200,
  "fav":["code","eat","swim","read"],
  "son":{
    "name":"小小明",
    "age":100,
    "lve":["code","eat"],
  }
}

// 陣列結構也可以作為json傳輸資料。

json資料可以儲存在.json檔案中，一般裡面就只有一個json物件。

總結：

1. json檔案的字尾是.json
2. json檔案一般儲存一個單一的json資料
3. json資料的屬性不能是方法或者undefined，屬性值只能：數值、字串、json和陣列
4. json資料只使用雙引號、每一個屬性成員之間使用逗號隔開，並且最後一個成員沒有逗號。
   {
      "name":"小明",
      "age":200,
      "fav":["code","eat","swim","read"],
      "son":{
        "name":"小小明",
        "age":100
      }
    }

工具：postman可以用於測試開發的資料介面。

4.1.2 js中提供的json資料轉換方法

javascript提供了一個JSON物件來操作json資料的資料轉換.

方法	引數	返回值	描述
stringify	json物件	字串	json物件轉成字串
parse	字串	json物件	字串格式的json資料轉成json物件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // json語法
    let humen = {
        "username":"xiaohui",
        "password":"1234567",
        "age":20
    };

    console.log(humen);
    console.log(typeof humen);

    // JSON物件提供對json格式資料的轉換功能
    // stringify(json物件)  # 用於把json轉換成字串
    let result = JSON.stringify(humen);
    console.log(result);
    console.log(typeof result);

    // parse(字串型別的json資料)  # 用於把字串轉成json物件
    let json_str = '{"password":"1123","age":20,"name":"xiaobai"}';
    console.log(json_str)
    console.log(typeof json_str)

    let json_obj = JSON.parse(json_str);
    console.log(json_obj);
    console.log(typeof json_obj)

    console.log(json_obj.age)
</script>
</body>
</html>

4.2 ajax

ajax，一般中文稱之為："阿賈克斯"，是英文 “Async Javascript And Xml”的簡寫，譯作：非同步js和xml資料傳輸資料。

ajax的作用： ajax可以讓js代替瀏覽器向後端程式傳送http請求，與後端通訊，在使用者不知道的情況下操作資料和資訊，從而實現頁面區域性重新整理資料/無重新整理更新資料。

所以開發中ajax是很常用的技術，主要用於操作後端提供的資料介面，從而實現網站的前後端分離。

ajax技術的原理是例項化js的XMLHttpRequest物件，使用此物件提供的內建方法就可以與後端進行資料通訊。

4.2.1 資料介面

資料介面，也叫api介面，表示後端提供操作資料/功能的url地址給客戶端使用。

客戶端通過發起請求向服務端提供的url地址申請操作資料【操作一般：增刪查改】

同時在工作中，大部分資料介面都不是手寫，而是通過函式庫/框架來生成。

4.2.3 ajax的使用

ajax的使用必須與服務端程式配合使用，但是目前我們先學習ajax的使用，所以暫時先不涉及到服務端python程式碼的編寫。因此，我們可以使用別人寫好的資料介面進行呼叫。

jQuery將ajax封裝成了一個函式$.ajax()，我們可以直接用這個函式來執行ajax請求。

介面	地址
天氣介面	http://wthrcdn.etouch.cn/weather_mini?city=城市名稱
音樂介面搜尋	http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=歌曲標題
音樂資訊介面	http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.play&songid=音樂ID

編寫程式碼獲取介面提供的資料：

jQ版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
    $(function(){
        $("#btn").on("click",function(){
            $.ajax({
                // 後端程式的url地址
                url: 'http://wthrcdn.etouch.cn/weather_mini',
                // 也可以使用method，提交資料的方式，預設是'GET'，常用的還有'POST'
                type: 'get', 
                dataType: 'json',  // 返回的資料格式，常用的有是'json','html',"jsonp"
                data:{ // 設定傳送給伺服器的資料，如果是get請求，也可以寫在url地址的?後面
                    "city":'北京'
                }
            })
            .done(function(resp) {     // 請求成功以後的操作,新的ajax是這樣寫的，之前是通過屬性success:function(){}的形式來寫的
                console.log(resp);
            })
            .fail(function(error) {    // 請求失敗以後的操作
                console.log(error);
            });
        });
    })
    </script>
</head>
<body>
<button id="btn">點選獲取資料</button>
</body>
</html>

vue版本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="city">
        <button @click="get_weather">點選獲取天氣</button>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                city:"",
            },
            methods:{
                get_weather(){
                    // http://wthrcdn.etouch.cn/weather_mini?city=城市名稱
                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
                        .then(response=>{
                            console.log(response);

                        }).catch(error=>{
                            console.log(error.response)
                    });
                }
            }
        })
    </script>
</body>
</html>

總結：

1. 傳送ajax請求，要通過$.ajax()，引數是物件，裡面有固定的引數名稱。
   $.ajax({
     "url":"資料介面url地址",
     "method":"http請求方式，前端只支援get和post",
     "dataType":"設定伺服器返回的資料格式，常用的json，html，jsonp，預設值就是json",
     // 要傳送給後端的資料引數，post時，資料必須寫在data，get可以寫在data,也可以跟在位址列?號後面
     "data":{
       "資料名稱":"資料值",
     }
   }).then(function(resp){ // ajax請求資料成功時會自動呼叫then方法的匿名函式
     console.log( resp ); // 服務端返回的資料
   }).fail(function(error){ // ajax請求資料失敗時會自動呼叫fail方法的匿名函式
     console.log( error );
   });
   
2. ajax的使用往往配合事件/鉤子操作進行呼叫。

jQuery還提供了$.get 和 $post簡寫$.ajax的操作。

// 傳送get請求
// 引數1：資料介面的請求地址
// 引數2：傳送給介面地址的資料引數
// 引數3：ajax請求成功以後，呼叫的匿名函式，匿名函式的第一個引數還是服務端返回的資料
// 引數4：設定服務端返回的資料格式，告訴給jQuery
$.get("test.php", { "func": "getNameAndTime" },
   function(data){
     alert(data.name); // John
     console.log(data.time); //  2pm
   }, "json");

// 傳送post請求
// 引數1：資料介面的請求地址
// 引數2：傳送給介面地址的資料引數
// 引數3：ajax請求成功以後，呼叫的匿名函式，匿名函式的第一個引數還是服務端返回的資料
// 引數4：設定服務端返回的資料格式，告訴給jQuery
$.post("test.php", { "func": "getNameAndTime" },
   function(data){
     alert(data.name); // John
     console.log(data.time); //  2pm
   }, "json");

4.2.4 同源策略

同源策略，是瀏覽器為了保護使用者資訊保安的一種安全機制。所謂的同源就是指代通訊的兩個地址（例如服務端介面地址與瀏覽器客戶端頁面地址）之間比較，是否協議、域名(IP)和埠相同。不同源的客戶端指令碼[javascript]在沒有明確授權的情況下，沒有許可權讀寫對方資訊。

ajax本質上還是javascript，是執行在瀏覽器中的指令碼語言，所以會被受到瀏覽器的同源策略所限制。

前端地址：`http://www.oldboy.cn/index.html`	是否同源	原因
`http://www.oldboy.cn/user/login.html`	是	協議、域名、埠相同
`http://www.oldboy.cn/about.html`	是	協議、域名、埠相同
`https://www.oldboy.cn/user/login.html`	否	協議不同 ( https和http )
`http:/www.oldboy.cn:5000/user/login.html`	否	埠不同( 5000和80)
`http://bbs.oldboy.cn/user/login.html`	否	域名不同 ( bbs和www )

同源策略針對ajax的攔截，程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
    <div id="app">
        <button @click="get_music">點選獲取天氣</button>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{},
            methods:{
                get_music(){
                    axios.get("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=我的中國心")
                        .then(response=>{
                            console.log(response);

                        }).catch(error=>{
                            console.log(error.response)
                    });
                }
            }
        })
    </script>
</body>
</html>

上面程式碼執行錯誤如下：

Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=%E6%88%91%E7%9A%84%E4%B8%AD%E5%9B%BD%E5%BF%83' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

上面錯誤，關鍵詞：Access-Control-Allow-Origin

只要出現這個關鍵詞，就是訪問受限。出現同源策略的攔截問題。

4.2.5 ajax跨域(跨源)方案之CORS

CORS是一個W3C標準，全稱是"跨域資源共享"，它允許瀏覽器向跨源的後端伺服器發出ajax請求，從而克服了AJAX只能同源使用的限制。

實現CORS主要依靠後端伺服器中響應資料中設定響應頭資訊返回的。

django的檢視

def post(request):

response = new Response()

response .set_header("Access-Control-Allow-Origin","*")

return response;

// 在響應行資訊裡面設定以下內容：
Access-Control-Allow-Origin: ajax所在的域名地址

Access-Control-Allow-Origin: www.oldboy.cn  # 表示只允許www.oldboy.cn域名的客戶端的ajax跨域訪問

// * 表示任意源，表示允許任意源下的客戶端的ajax都可以訪問當前服務端資訊
Access-Control-Allow-Origin: *

總結：

0. 同源策略：瀏覽器的一種保護使用者資料的一種安全機制。
   瀏覽器會限制指令碼語法不能跨源訪問其他源的資料地址。
   同源：判斷兩個通訊的地址之間，是否協議，域名[IP]，埠一致。
   
   ajax：  http://127.0.0.1/index.html
   api資料介面：  http://localhost/index
   
   這兩個是同源麼？不是同源的。是否同源的判斷依據不會根據電腦來判斷，而是通過協議、域名、埠的字串是否來判斷。
   
1. ajax預設情況下會受到同源策略的影響，一旦受到影響會報錯誤如下：
	 No 'Access-Control-Allow-Origin' header is present on the requested resource

2. 解決ajax只能同源訪問資料介面的方式：
   1. 在服務端的響應行中設定：
      Access-Control-Allow-Origin: 允許訪問的域名地址
   2. jsonp
   3. 是否服務端代理
      思路：通過python來請求對應的伺服器介面，獲取到資料以後，

5. 元件化開發

5.1 元件[component]

元件（Component）是自定義封裝的功能。在前端開發過程中，經常出現多個網頁的功能是重複的，而且很多不同的網站之間，也存在同樣的功能。

而在網頁中實現一個功能，需要使用html定義功能的內容結構，使用css宣告功能的外觀樣式，還要使用js來定義功能的特效，因此就產生了把一個功能相關的[HTML、css和javascript]程式碼封裝在一起組成一個整體的程式碼塊封裝模式，我們稱之為“元件”。

所以，元件就是一個html網頁中的功能，一般就是一個標籤，標籤中有自己的html內容結構，css樣式和js特效。

這樣，前端人員就可以在開發時，只需要書寫一次程式碼，隨處引入即可使用。

我們在進行vue開發的時候，還記得我們自己建立的vm物件嗎，這個vm物件我們稱為一個大元件，根元件(頁面上叫Root)，在一個網頁的開發中，根據網頁上的功能區域我們又可以細分成其他元件，或稱為子元件

元件有兩種：預設元件[全域性元件] 和單檔案元件[區域性元件]

5.1.1區域性元件

三步：聲子、用子、掛子

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <div class="vheader">
        這是頭部{{msg}}
    </div>
    <App/>  <!--3 使用子元件-->

</div>


</body>
<script>
    //子元件的名稱儘量不要叫做Header或者vHeader等，以防和最新的H5中的標籤名稱衝突，導致元件無法使用
    //  1 宣告子元件
    let App = {

        data(){
            return {
                'appmsg':'hello app!'
            }
        },
        template:`
            <div class="content">

                內容部分{{appmsg}}
            </div>

        `


    };



    let vm = new Vue({
        el:'#app',

        data(){
            return {
                'msg':'hello'
            }
        },

        components:{
            App,  // 2 掛載子元件

        }
        // template:`
        //     <div class="vheader"> 
        //         這是頭部
        //     </div>
        //
        // `


    })




</script>
</html>

5.1.2 預設元件(全域性元件)

直接看程式碼，區域性元件使用時需要掛載，全域性元件使用時不需要掛載。那麼他們兩個什麼時候用呢，區域性元件就在某個區域性使用的時候，全域性元件是大家公用的，或者說每個頁面都有這麼一個功能的時候，在哪裡可能都會用到的時候。

<div id="app">
    <addnum></addnum>

</div>

<script>
    Vue.component("addnum",{
        template:'<div><input type="text" v-model="num"><button @click="num+=1">點選</button></div>',
        data: function(){
            // 寫在這裡的資料只有當前元件可以使用
            return {
                num:1,
            }
        }
    });


    var vm = new Vue({
        el:"#app",
        data:{

        }
    })
</script>

5.2 元件傳值

通過prop屬性進行傳值

5.2.1 父元件往子元件傳值

兩步：　　

1.在子元件中使用props屬性宣告，然後可以直接在子元件中任意使用

　　2.父元件要定義自定義的屬性

看示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <div class="vheader">
        這是頭部{{msg}}
    </div>
    <App :xx="msg"/> 

</div>


</body>
<script>
    let App = {

        data(){
            return {
                'appmsg':'hello app!'
            }
        },
        template:`
            <div class="content">

                內容部分{{appmsg}}--{{xx}}
            </div>

        `,
        props:['xx',]

    };

    let vm = new Vue({
        el:'#app',

        data(){
            return {
                'msg':'hello'
            }
        },

        components:{
            App,  

        }

    })




</script>
</html>

使用父元件傳遞資料給子元件時, 注意一下幾點:

傳遞資料是變數,則需要在屬性左邊新增冒號.

傳遞資料是變數,這種資料稱之為"動態資料傳遞"

傳遞資料不是變數,這種資料稱之為"靜態資料傳遞"
父元件中修改了資料,在子元件中會被同步修改,但是,子元件中的資料修改了,是不是影響到父元件中的資料.

這種情況,在開發時,也被稱為"單向資料流"

5.2.2 子元件父元件傳值

兩步：

　　a.子元件中使用this.$emit('fatherHandler',val);fatherHandler是父元件中使用子元件的地方新增的繫結自定義事件，注意，如果fatherHandler報錯了，那麼可能是你的vue版本不支援自定義鍵名稱fatherHandler中有大寫字母，所以我們改成father-handler或者直接就全部小寫就可以了

<Vheader @fatherHandler="appFatherHandler"></Vheader>

　　b.父元件中的methods中寫一個自定義的事件函式：appFatherHandler(val){}，在函式裡面使用這個val，這個val就是上面子元件傳過來的資料

　看程式碼：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <div class="vheader">
        這是頭部{{msg}} -- {{sondata}}
    </div>
    <App @son="sonDataHandler"/>

</div>


</body>
<script>
    let App = {

        data(){
            return {
                'appmsg':'hello app!'
            }
        },
        template:`
            <div class="content">

                內容部分{{appmsg}}
                <button @click="xH"></button>
            </div>

        `,
        methods:{
            xH(){
                this.$emit('son',this.appmsg)
            }
        }

    };

    let vm = new Vue({
        el:'#app',

        data(){
            return {
                'msg':'hello',
                'sondata':'xxx',
            }
        },

        components:{
            App,

        },
        methods:{
            sonDataHandler(val){
                console.log(val);

                this.sondata = val;

            }

        }

    })


</script>
</html>

5.2.3 平行元件傳值

什麼是平行元件，看圖

看程式碼 :宣告兩個全域性元件T1和T2，T1元件將資料傳送給T2元件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <div class="vheader">
        這是頭部{{msg}} -- {{sondata}}
    </div>
    <!--<App :xx="msg"/>-->
    <App @sonHa="sonDataHandler"/>

</div>


</body>
<script>
    let bus = new Vue();

    Vue.component('T1',{

        data(){
            return {
                't1num':100,
            }
        },
        template:`

            <div class="t1">

                {{t1num}}
                <button @click="f1">走你</button>

            </div>
        `,
        methods:{
            f1(){
                // console.log(this.t1num);
                bus.$emit('TestData',this.t1num)

            }
        }

    });

    Vue.component('T2',{

        data(){
            return {
                't2num':200,
                't1n':0,
            }
        },
        template:`

            <div class="t2">

                <h1>{{t2num}}</h1>
                <h2 style="color:red;">{{t1n}}</h2>

            </div>
        `,
        created(){
            // console.log(this.t1n);
            bus.$on('TestData',(val)=>{

                console.log(val);
                this.t1n = val;

            })

        }

    });


    let App = {

        data(){
            return {
                'appmsg':'hello app!'
            }
        },
        template:`
            <div class="content">

                內容部分{{appmsg}}
                <button @click="xH">點選</button>
                <T1></T1>
                <T2></T2>
            </div>

        `,
        methods:{
            xH(){
                this.$emit('sonHa',this.appmsg)
            }
            // console.log(this);


        }
        // props:['xx',]


    };



    let vm = new Vue({
        el:'#app',

        data(){
            return {
                'msg':'hello',
                'sondata':'xxx',
            }
        },

        components:{
            App,

        },
        methods:{
            sonDataHandler(val){
                console.log(val);

                this.sondata = val;

            }

        }

    })

</script>
</html>

6. vue-router的使用

6.1 介紹

vue就是我們前面學習的vue基礎，vue + vue-router 主要用來做SPA(Single Page Application)，單頁面應用

為什麼要使用單頁面應用呢？因為傳統的路由跳轉，如果後端資源過多，會導致頁面出現'白屏現象'，所以我們希望讓前端來做路由，在某個生命週期的鉤子函式中，傳送ajax來請求資料，進行資料驅動，之前比如我們用django的MTV模式，我們是將後端的資料全部渲染給了模板，然後模板再發送給前端進行瀏覽器頁面的渲染，一下將所有的資料都給了頁面，而我們現在使用vue，我可以在元件的鉤子函式中傳送對應的ajax請求去獲取對應的資料，而不是褲衩一下子就把資料都放到頁面上了，單頁面應用給我們提供了很多的便利，說起來大家可能沒有什麼切實的體會，來，給大家推薦一個稀土掘金網站，這個網站就是一個單頁面應用，是一個開發者技術社群網站，裡面的資源會有很多，看樣子：

　　這樣的網站我們通過django是可以來完成頁面的渲染的，模板渲染嘛，但是這個論壇的資料資源有很多，我們通過django的MTV模式是一下子就將資料全部放到頁面裡面了，那麼頁面通過瀏覽器渲染的時候，瀏覽器可能沒有那麼快渲染出來，會出現幾秒鐘的白屏現象，也就是說幾秒鐘之後使用者才看到頁面的內容，這樣體驗起來就不好，為了使用者體驗好，就用到了我們說的單頁面應用，django模板渲染做大型應用的時候，也就是頁面很複雜，資料量很大的頁面的時候，是不太合適的，當然如果你夠nb，你也可以優化，但是一般它比較適合一些頁面資料比較小的應用。

　　那麼解釋一下什麼是單頁應用，看下圖：(react、angular也都是做單頁面應用，很多大型的網站像網易雲音樂，豆瓣等都是react寫的單頁面應用)

　　vue + vue-router就是完成單頁面應用的，vue-router(路由)是vue的核心外掛

下面我們來下載一下vue-router，文件地址，下載vue-router的cnd連結地址：https://unpkg.com/vue-router/dist/vue-router.js

官網簡單操作：

// 0. 如果使用模組化機制程式設計，匯入Vue和VueRouter，要呼叫 Vue.use(VueRouter)

// 1. 定義 (路由) 元件。
// 下面兩個元件可以從其他檔案 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定義路由
// 每個路由應該對映一個元件。 其中"component" 可以是
// 通過 Vue.extend() 建立的元件構造器，
// 或者，只是一個元件配置物件。
// 我們晚點再討論巢狀路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 建立 router 例項，然後傳 `routes` 配置
// 你還可以傳別的配置引數, 不過先這麼簡單著吧。
const router = new VueRouter({
  routes // (縮寫) 相當於 routes: routes
})

// 4. 建立和掛載根例項。
// 記得要通過 router 配置引數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 現在，應用已經啟動了！

6.2 簡單示例

示例：通過不同的路徑訪問到不同的元件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


</head>
<body>

<div id="app">
    <App></App>
</div>



</body>
<script src="js/vue.js"></script>
<!--<script src="js/vue-router.js"></script>-->
<!-- 注意：測試的時候可能因為你的vue或者vue-router檔案有些版本上的衝突問題，導致router-link不能生成a標籤，所有建議用下面這兩個進行測試，然後再找對應的版本存到本地 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    // import VueRouter from 'node_modules/vue-router/dist/vue-router'
    Vue.use(VueRouter);

    let Home = {
        data(){
            return {
                'msg':'hello home',
            }
        },
        template:`
                <div class="home">
                    {{msg}}

                </div>

        `

    };
    let Course = {
        data(){
            return {
                'msg':'hello course',
            }
        },
        template:`
                <div class="course">
                    {{msg}}

                </div>

        `

    };

    let App = {
        data(){
            return {}
        },
        template:`

            <div>
                <router-link to="/home">首頁</router-link>
                <router-link to="/course">課程詳情頁</router-link>

                <router-view></router-view>

            </div>
        `
    };

    let router = new VueRouter({
       // mode:'history',
        routes:[
            // {path:'/',redirect},
            {path:'/home',component:Home},
            {path:'/course',component:Course},
        ]


    });

    let vm = new Vue({
        el:'#app',
        router,
        data(){
            return {

            }
        },
        // template:`<App></App>`,
        components:{
            App,
        }

    })

</script>
</html>

7. Vue自動化工具（Vue-cli）

前面學習了普通元件以後，接下來我們繼續學習單檔案元件則需要提前先安裝準備一些元件開發工具。否則無法使用和學習單檔案元件。

一般情況下，單檔案元件，我們執行在自動化工具vue-CLI中，可以幫我們編譯單檔案元件。所以我們需要在系統中先搭建vue-CLI工具，

官網：https://cli.vuejs.org/zh/

Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一臺電腦中管理多個 Node 版本。

nvm工具的下載和安裝： https://www.jianshu.com/p/d0e0935b150a

https://www.jianshu.com/p/622ad36ee020

安裝記錄:

開啟:https://github.com/coreybutler/nvm-windows/releases

常用的nvm命令

nvm list # 列出目前在nvm裡面安裝的所有node版本
nvm install node版本號 # 安裝指定版本的node.js
nvm uninstall node版本號 # 解除安裝指定版本的node.js
nvm use node版本號 # 切換當前使用的node.js版本

如果使用nvm工具，則直接可以不用自己手動下載，如果使用nvm下載安裝 node的npm比較慢的時候，可以修改nvm的配置檔案(在安裝根目錄下)

# settings.txt
root: C:\tool\nvm    [這裡的目錄地址是安裝nvm時自己設定的地址,要根據實際修改]
path: C:\tool\nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/

7.1 安裝node.js

Node.js是一個新的後端(後臺)語言，它的語法和JavaScript類似，所以可以說它是屬於前端的後端語言，後端語言和前端語言的區別：

執行環境：後端語言一般執行在伺服器端，前端語言執行在客戶端的瀏覽器上
功能：後端語言可以操作檔案，可以讀寫資料庫，前端語言不能操作檔案，不能讀寫資料庫。

我們一般安裝LTS(長線支援版本)：

下載地址：https://nodejs.org/en/download/【上面已經安裝了nvm，那麼這裡不用手動安裝了】

node.js的版本有兩大分支：

官方釋出的node.js版本：0.xx.xx 這種版本號就是官方釋出的版本

社群釋出的node.js版本：xx.xx.x 就是社群開發的版本

Node.js如果安裝成功，可以檢視Node.js的版本,在終端輸入如下命令：

node -v

7.2 npm

在安裝node.js完成後，在node.js中會同時幫我們安裝一個npm包管理器npm。我們可以藉助npm命令來安裝node.js的包。這個工具相當於python的pip管理器。

npm install -g 包名              # 安裝模組   -g表示全域性安裝，如果沒有-g，則表示在當前專案安裝
npm list                        # 檢視當前目錄下已安裝的node包
npm view 包名 engines            # 檢視包所依賴的Node的版本 
npm outdated                    # 檢查包是否已經過時，命令會列出所有已過時的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 解除安裝node包
npm 命令 -h                      # 檢視指定命令的幫助文件

7.3 安裝Vue-cli

npm install -g vue-cli

如果安裝速度過慢，一直超時，可以考慮切換npm映象源：http://npm.taobao.org/

指令：

 1     //臨時使用
 2     npm install jquery --registry https://registry.npm.taobao.org
 3 
 4     //可以把這個選型配置到檔案中，這樣不用每一次都很麻煩
 5     npm config set registry https://registry.npm.taobao.org
 6 
 7     //驗證是否配置成功 
 8     npm config list 或者 npm config get registry
 9 
10     //在任意目錄下都可執行,--global是全域性安裝，不可省略
11     npm install --global cnpm 或者 npm install -g cnpm --registry=https://registry.npm.taobao.org
12 
13     //安裝後直接使用
14     cnpm install jquery

npm和cnpm介紹

參考部落格： https://blog.csdn.net/jack_bob/article/details/80644376

7.4 使用Vue-CLI初始化建立專案

7.4.1 生成專案目錄

使用vue自動化工具可以快速搭建單頁應用專案目錄。

該工具為現代化的前端開發工作流提供了開箱即用的構建配置。只需幾分鐘即可建立並啟動一個帶熱過載、儲存時靜態檢查以及可用於生產環境的構建配置的專案：

// 生成一個基於 webpack 模板的新專案
vue init webpack 專案名
例如：
vue init webpack myproject


// 啟動開發伺服器 ctrl+c 停止服務
cd myproject
npm run dev           # 執行這個命令就可以啟動node提供的測試http伺服器

那麼訪問一下命令執行完成後提示出來的網址就可以看到網站了：http://localhost:8080/

7.4.2 專案目錄結構

src 主開發目錄，要開發的單檔案元件全部在這個目錄下的components目錄下

static 靜態資源目錄，所有的css，js，圖片等檔案放在這個資料夾

dist專案打包釋出資料夾，最後要上線單檔案專案檔案都在這個資料夾中[後面打包專案,讓專案中的vue元件經過編譯變成js 程式碼以後,dist就出現了]

node_modules目錄是node的包目錄，

config是配置目錄，

build是專案打包時依賴的目錄

src/router 路由,後面需要我們在使用Router路由的時候,自己宣告.

7.4.3 專案執行流程圖

整個專案是一個主檔案index.html,index.html中會引入src資料夾中的main.js,main.js中會匯入頂級單檔案元件App.vue,App.vue中會通過元件巢狀或者路由來引用components資料夾中的其他單檔案元件。

8. 單檔案元件的使用

元件有兩種：普通元件、單檔案元件

普通元件的缺點：

html程式碼是作為js的字串進行編寫，所以組裝和開發的時候不易理解，而且沒有高亮效果。
普通元件用在小專案中非常合適，但是複雜的大專案中，如果把更多的元件放在html檔案中，那麼維護成本就會變得非常昂貴。
普通元件只是整合了js和html，但是css程式碼被剝離出去了。使用的時候的時候不好處理。

將一個元件相關的html結構，css樣式，以及互動的JavaScript程式碼從html檔案中剝離出來，合成一個檔案，這種檔案就是單檔案元件，相當於一個元件具有了結構、表現和行為的完整功能，方便元件之間隨意組合以及元件的重用，這種檔案的副檔名為“.vue”，比如："Home.vue"。

如果使用的是PyCharm這個IDE，需要我們自行下載vue的外掛，在配置中找到plugins，然後搜尋vue.js，點選下載，下載完成之後重啟PyCharm就可以了

8.1建立元件

在元件中編輯三個標籤，編寫檢視、vm物件和css樣式程式碼。

template 編寫html程式碼的地方

<template>
  <div id="Home">
    <span @click="num--" class="sub">-</span>
    <input type="text" size="1" v-model="num">
    <span @click="num++" class="add">+</span>
  </div>
</template>

script編寫vue.js程式碼

<script>
  export default {
    name:"Home",
    data: function(){
      return {
        num:0,
      }
    }
  }
</script>

style編寫當前元件的樣式程式碼

<style scoped>
  .sub,.add{
    border: 1px solid red;
    padding: 4px 7px;
  }
</style>

8.2 完成案例-點選加減數字

建立Homes.vue

<template>
  <div id="Home">
    <span @click="num--" class="sub">-</span>
    <input type="text" size="1" v-model="num">
    <span @click="num++" class="add">+</span>
  </div>
</template>


<script>
  export default {
    name:"Home",
    data: function(){
      return {
        num:0,
      }
    }
  }
</script>

<style scoped>
  .sub,.add{
    border: 1px solid red;
    padding: 4px 7px;
  }
</style>

在App.vue元件中呼叫上面的元件

<template>
  <div id="Home">
    <span @click="num--" class="sub">-</span>
    <input type="text" size="1" v-model="num">
    <span @click="num++" class="add">+</span>
  </div>
</template>


<script>
  export default {
    name:"Home",
    data: function(){
      return {
        num:0,
      }
    }
  }
</script>

<style scoped>
  .sub,.add{
    border: 1px solid red;
    padding: 4px 7px;
  }
</style>

在開發vue專案之前，需要手動把 App.vue的HelloWorld元件程式碼以及預設的css樣式，清楚。

8.3 元件的巢狀(上面已經寫過了)

有時候開發vue專案時,頁面也可以算是一個大元件,同時頁面也可以分成多個子元件.

因為,產生了父元件呼叫子元件的情況.

例如,我們可以宣告一個元件,作為父元件

在components/建立一個儲存子元件的目錄HomeSon

在HomeSon目錄下,可以建立當前頁面的子元件,例如,是Menu.vue

//  元件中程式碼必須寫在同一個標籤中
<template>
    <div id="menu">
      <span>{{msg}}</span>
      <div>hello</div>
  </div>
</template>

<script>
  export default {
    name:"Menu",
    data: function(){
      return {
        msg:"這是Menu元件裡面的選單",
      }
    }
  }
</script>

9. 在元件中使用axios獲取資料

預設情況下，我們的專案中並沒有對axios包的支援，所以我們需要下載安裝。

在專案根目錄中使用 npm安裝包

npm install axios

接著在main.js檔案中，匯入axios並把axios物件掛載到vue屬性中多為一個子物件，這樣我們才能在元件中使用。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App' // 這裡表示從別的目錄下匯入 單檔案元件
import axios from 'axios'; // 從node_modules目錄中匯入包
Vue.config.productionTip = false

Vue.prototype.$axios = axios; // 把物件掛載vue中

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});

9.1 在組建中使用axios獲取資料

<script>
  export default{
	。。。
	methods:{
      get_data:function(){
         // 使用axios請求資料
        this.$axios.get("http://wthrcdn.etouch.cn/weather_mini?city=深圳").then((response)=>{
            console.log(response);
        }).catch(error=>{
            console.log(error);
        })
      }
    }
  }
</script>

使用的時候，因為本質上來說，我們還是原來的ajax，所以也會收到同源策略的影響。