vue的使用（第二章）

時間 2020-06-28

標籤 vue 使用第二简体版

原文原文鏈接

vue的使用2

4. 經過axios實現數據請求

vue.js默認沒有提供ajax功能的。javascript

因此使用vue的時候，通常都會使用axios的插件來實現ajax與後端服務器的數據交互。php

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

下載地址：html

https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js

axios提供發送請求的經常使用方法有兩個：axios.get() 和 axios.post() 。前端

增 postvue

刪 deletejava

改 putnode

查 getpython

// 發送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對象的一種數據格式。react

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: *

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-n9gXRZUz-1589445120083)(assets/1556074087897.png)]

總結：

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 install 12.13.1

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 install -g vue-cli --registry https://registry.npm.taobao.org

若是安裝速度過慢，一直超時，能夠考慮切換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介紹

參考博客： http://www.javashuo.com/article/p-vsseezil-kx.html

安裝vue-cli

nvm是node.js的版本管理工具

1 安裝node.js 自帶npm

2 經過npm 安裝vue-cli 它的運行須要依賴node.js的環境

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 項目執行流程圖

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-hCgyICQi-1589445120203)(vue-2.assets/image-20200114174249570.png)]

整個項目是一個主文件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，因此也會收到同源策略的影響。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。