文章目錄

一、Vue
- 1.1 Vue介紹
- 1.2 Vue特點
- 1.3 Vue周邊庫
二、初始Vue
- 2.1 插值語法
- 2.2 指令語法
- - 2.2.1 v:bind / 簡寫 : 指令單向資料系結
  - 2.2.2 v-model 雙向資料系結
- 2.3 事件處理
- 2.4 事件修飾符
- 2.5 鍵盤事件
- 2.6 計算屬性
- 2.7 監聽屬性
- 2.8 計算屬性與監聽屬性之間的區別
- 2.9 條件渲染
- 2.10 條件渲染
- 2.11 收集表單資料的細節
- 2.12 內置指令
- - 2.12.1 v-text
  - 2.12.2 v-html
  - 2.12.3 v-once
- 2.12.4 v-pre
- 2.13 Vue生命周期
- - 2.13.1 什么是生命周期
  - 2.13.2 宣告周期總結
三、Vue組件化編程
- 3.1組件的理解
- 3.2 非單檔案組件
- 3.3 組件的基本實用(以后基本不會使用)
- 3.4 VueComponent
- 3.5 模塊化的三種暴露方式
四、安裝vue-cli
- 4.1 步驟
- 4.2 檔案結構
- 4.3 ref屬性
- 4.4 props屬性
- 4.5 mixin屬性
- 4.6 插件
- 4.7 scoped樣式
- 4.8 組件自定義事件
- 4.9 解綁自定義事件
- 4.10 全域事件總線(開發中用的較多)
- 4.11 Vue過度影片
- - 4.11.1 繼承第三方影片庫
五、Axios
- 5.1 使用axios
- 5.2 Vue腳手架配置代理
- 5.3 插槽
六、Vuex
- 6.1概念
- 6.2 搭建Vuex環境
- 6.3 基本使用
- 6.5 getters
七、路由
- 7.1 基本使用
- 7.2 多級路由（覆寫路由）
- 7.3 路由的query引數
- 7.4 命名路由
- 7.5 路由的params引數(RestFul風格)
- 7.7 路由的props配置
- 7.8 編程式路由導航
- 7.9 快取路由組件
- 7.10 兩個新的生命周期鉤子
- 7.11 路由守衛
- - 7.11.1 全域加守衛
  - 7.11.2 獨享守衛
  - 7.11.3 組件守衛
- 7.12 路由的兩種作業模式
8、Element-UI組件庫

提示：以下是本篇文章正文內容，下面案例可供參考

一、Vue

1.1 Vue介紹

Vue官網
動態構建用戶界面的漸進式 JavaScript 框架
作者: 尤雨溪

1.2 Vue特點

遵循 MVVM 模式
編碼簡潔, 體積小, 運行效率高, 適合移動/PC 端開發
它本身只關注 UI, 也可以引入其它第三方庫開發專案

1.3 Vue周邊庫

vue-cli: vue 腳手架
vue-resource
axios
vue-router: 路由
vuex: 狀態管理
element-ui: 基于 vue 的 UI 組件庫(PC 端)

二、初始Vue

2.1 插值語法

功能: 用于決議標簽體內容
語法: {{xxx}} ，xxxx 會作為 js 運算式決議

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 創建一個存放vue資料的容器 -->
    <div id="root">
        <!-- {{xxx}}  可以直接獲取vue實體中data里相對應的資料 -->
            {{name}} 
    </div>
    <script>
        // 創建一個vue實體物件
        let x=new Vue({
            //對應的容器id,也可以是類選擇器
            el:"#root",
            //存放的資料  
            data:{
                name:"zhangsan",
                url:"www.baidu.com",
            }
        });
    </script>
</body>
</html>

2.2 指令語法

2.2.1 v:bind / 簡寫 : 指令單向資料系結

功能: 決議標簽屬性、決議標簽體內容、系結事件
舉例：v-bind:href = ‘xxxx’ ，xxxx 會作為 js 運算式被決議 xxx為數字時,不會被當做String型別決議
說明：Vue 中有有很多的指令，此處只是用 v-bind 舉個例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 創建一個存放vue資料的容器 -->
    <div id="root">
            <a v-bind:href="url">跳轉頁面(會獲取實體中data里面的url資料)</a>
    </div>
    <script>
        // 創建一個vue實體物件
        let x=new Vue({
            //對應的容器id,也可以是類選擇器
            el:"#root",
            //存放的資料  
            data:{
                name:"zhangsan",
                url:"www.baidu.com",
            }
        });
    </script>
</body>
</html>

2.2.2 v-model 雙向資料系結

語法：v-mode:value=“xxx” 或簡寫為 v-model=“xxx”
特點：資料不僅能從 data 流向頁面，還能從頁面流向 data
備注：v-model:value可以簡寫為v-model,因為v-model默認收集的就是value值
注意：v-model只能應用在表單類元素(輸入類元素 input,select 等)

	<input type="text" v-model:value="name">

2.3 事件處理

語法：v-on:xxx 或 @xxx 系結事件,十中xxx是事件名例： v-on:click 單擊事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 創建一個存放vue資料的容器 -->
            <!-- 事件系結的兩種方法 -->
            <span id="cli" v-on:click="showInfo">點我</span>
            <span @click="showInfo($event,66)">點我</span>
    </div>

    <script>
        // 創建一個vue實體物件
        let x=new Vue({
            //對應的容器id,也可以是類選擇器
            el:"#root",
            //存放的資料  
            data:{
                name:"zhangsan",
                url:"www.baidu.com",
            },
            methods: {
                showInfo(){
                    alert(1);
                },
                showInfo(event,number){
                    console.log(event,number);
                }
            },
        });
        
    </script>
</body>
</html>

2.4 事件修飾符

加在事件處理的后面以 . 開始加

	1. prevent：阻止默認事件(常用)
	<a href="www.baidu.com" @click.prevent="showInfo($event,66)">點我阻止默認事件</a>
	2. stop：阻止事件冒泡(常用)
	
	3. once：事件只觸發一次(常用)

2.5 鍵盤事件

Vue中常用的按鍵別名 @keyup.xxx=“方法名”/@keydown.xxx=“方法名” xxx代表下面的按鍵別名

	1. 回車=> enter
	2. 洗掉=> delete(捕獲“洗掉”和“退格”鍵)
	3. 退出=> esc
	4. 空格=> space
	5. 換行=> tab(特殊,必須配合@keydown使用)
	6. 上=> up
	7. 下=> down
	8. 左=> left
	9. 右=>right

使用按鍵別名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 創建一個存放vue資料的容器 -->
    <div id="root" v-bind:href="url">
            鍵盤事件：<input type="text" @keyup.enter="keycode">
    </div>

    <script>
        // 創建一個vue實體物件
        let x=new Vue({
            //對應的容器id,也可以是類選擇器
            el:"#root",
            //存放的資料  
            data:{
                name:"zhangsan",
                url:"www.baidu.com",
            },
            methods: {
                keycode(e){
                    //列印文本的值
                    console.log(e.target.value);
                }

            },
        });
        
    </script>
</body>
</html>

2.6 計算屬性

	計算屬性：
		1. 定義：要用的屬性不存在，要通過已有屬性計算得來
		2. 原理：底層借助了Object.defineproperty方法提供的getter和setter
		3. get函式什么時候執行？
			(1). 初次讀取時會執行一次
			(2). 當依賴的資料發生改變時會被再次呼叫，
		4. 優勢：與methods實作相比,內部有快取機制(復用),效率更高,除錯方便，
		5. 備注：
			(1). 計算屬性最侄訓出現在vm上,直接讀取使用即可，
			(2). 如果計算屬性要被修改,那必須寫set函式去回應修改,且set中要引起計算時依賴的資料發生改變，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="root">
        firstName：<input type="text" v-model="firstName"><br>
        lastName：<input type="text" v-model="lastName"><br>
        全名：<span> {{fullName}} </span>
    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
                firstName:"張",
                lastName:"三",
            },
            computed: {
                // 直接當做普通屬性呼叫不加括號
                // 任何data中資料變化立即重新計算
                // 計算屬性會快取
                fullName:{
                    //get有什么用？當有人讀取fullName時，get就會被呼叫，且回傳值就作為fullName的值
                    //get什么時候用？ 1.初次讀取fullName時候， 2.所依賴的資料發生變化時，
                    get(){
                        return this.firstName+"-"+this.lastName;
                    }
                    set(value){
                        console.log(屬性被修改);
                        const arr=value.split["-"];
                        this.firstName=arr[0];
                        this.lastName=arr[1];
                    }
                }
            },
        })
    </script>
</body>
</html>

計算屬性簡寫：只考慮展示資料,不考慮修改資料時,可以使用

<body>
    <div id="root">
        firstName：<input type="text" v-model="firstName"><br>
        lastName：<input type="text" v-model="lastName"><br>
        全名：<span> {{fullName}} </span>
    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
                firstName:"張",
                lastName:"三",
            },
            computed: {
                // 直接當做普通屬性呼叫不加括號
                // 任何data中資料變化立即重新計算
                // 計算屬性會快取
                // fullName:{
                //     //get有什么用？當有人讀取fullName時，get就會被呼叫，且回傳值就作為fullName的值
                //     //get什么時候用？ 1.初次讀取fullName時候， 2.所依賴的資料發生變化時，
                //     get(){
                //         return this.firstName+"-"+this.lastName;
                //     },
                //     set(value){
                //         console.log(屬性被修改);
                //         const arr=value.split["-"];
                //         this.firstName=arr[0];
                //         this.lastName=arr[1];
                //     }
                // },

                //上面fullName的簡寫 可以直接寫要展示的方法即可
                fullName(){
                    return this.firstName+"-"+this.lastName;
                }
            },
        })
    </script>
</body>

2.7 監聽屬性

<script>
        new Vue({
            el: "#root",
            data: {
                firstName: "張",
                lastName: "三",
            },
            watch: {
                //語法
                /** 1.
                 *  要監視的物件:{
                 *      handler(newVal,oldVal){
                 *          
                 *      }
                 *  }
                 *  2.
                 *  要監視的物件:(newVal,oldVal)->{
                 *      業務
                 *  }
                **/
                firstName: (newVal, oldVal) => {
                    console.log(newVal, oldVal);
                },
                lastName: {
                	immediate:true, //初始化時讓handler呼叫一下
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal);
                    }
                },
                //監測驗性 簡寫
                firstName(newVal, oldVal){
                    console.log(newVal, oldVal);
                }
            },

        })
    </script>

2.8 計算屬性與監聽屬性之間的區別

computed和watch的區別

	1. computed能完成的功能,watch都可以完成，
	2. watch能完成的功能,computed不一定能完成,例如：watch可以進行異步操作，

兩個重要的小原則：

	1. 所被Vue管理的函式,最好寫成普通函式,這樣this的指向才是 vm 或 組件實體物件
	2. 所有不被Vue管理的函式(定時器回呼函式,ajax的回呼函式,Promise的回呼函式),最好寫成箭頭函式,這樣this的指向才是 vm 或 組件實體物件

2.9 條件渲染

<!-- v-show做條件渲染：true顯示標簽，false給標簽加上display:none隱藏標簽 -->
        <a href="#" v-show="true">超鏈接</a>
        <a href="#" v-show="false">超鏈接</a>
        <!-- v-if做條件渲染：true顯示標簽，false給標簽洗掉 -->
        <a href="#" v-if="true">超鏈接</a>
        <a href="#" v-if="false">超鏈接</a>

2.10 條件渲染

<body>
    <div id="root">
        <ul>
            <!-- 需要遍歷哪個標簽,v-for遍歷就加在哪個標簽身上  -->
            <!-- key放在虛擬DOM中進行diff演算法運行時用到,key最好使用資料中的唯一表示,防止出現意想不到的BUG）-->
            <!-- 若不寫key,默認是采用index索引值當做key-->
            <li v-for="(person,index) in persons" :key="person.id">
                {{person.name}}--{{person.age}}-{{index}}--{{person.id}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
                persons:[
                    {id:"001",name:"張三",age:16},
                    {id:"002",name:"李四",age:17},
                    {id:"003",name:"王五",age:18},
                ]
            }
        })
    </script>
</body>

2.11 收集表單資料的細節

<!-- 
			收集表單資料：
					若：<input type="text"/>，則v-model收集的是value值，用戶輸入的就是value值，
					若：<input type="radio"/>，則v-model收集的是value值，且要給標簽配置value值，
					若：<input type="checkbox"/>
							1.沒有配置input的value屬性，那么收集的就是checked（勾選 or 未勾選，是布林值）
							2.配置input的value屬性:
									(1)v-model的初始值是非陣列，那么收集的就是checked（勾選 or 未勾選，是布林值）
									(2)v-model的初始值是陣列，那么收集的的就是value組成的陣列
					備注：v-model的三個修飾符：
									lazy：失去焦點再收集資料
									number：輸入字串轉為有效的數字
									trim：輸入首尾空格過濾
		-->

	<body>
		<!-- 
			收集表單資料：
					若：<input type="text"/>，則v-model收集的是value值，用戶輸入的就是value值，
					若：<input type="radio"/>，則v-model收集的是value值，且要給標簽配置value值，
					若：<input type="checkbox"/>
							1.沒有配置input的value屬性，那么收集的就是checked（勾選 or 未勾選，是布林值）
							2.配置input的value屬性:
									(1)v-model的初始值是非陣列，那么收集的就是checked（勾選 or 未勾選，是布林值）
									(2)v-model的初始值是陣列，那么收集的的就是value組成的陣列
					備注：v-model的三個修飾符：
									lazy：失去焦點再收集資料
									number：輸入字串轉為有效的數字
									trim：輸入首尾空格過濾
		-->
		<!-- 準備好一個容器-->
		<div id="root">
			<form @submit.prevent="demo">
				賬號：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密碼：<input type="password" v-model="userInfo.password"> <br/><br/>
				年齡：<input type="number" v-model.number="userInfo.age"> <br/><br/>
				性別：
				男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
				女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
				愛好：
				學習<input type="checkbox" v-model="userInfo.hobby" value="study">
				打游戲<input type="checkbox" v-model="userInfo.hobby" value="game">
				吃飯<input type="checkbox" v-model="userInfo.hobby" value="eat">
				<br/><br/>
				所屬校區
				<select v-model="userInfo.city">
					<option value="">請選擇校區</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
					<option value="wuhan">武漢</option>
				</select>
				<br/><br/>
				其他資訊：
				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
				<input type="checkbox" v-model="userInfo.agree">閱讀并接受<a href="http://www.baidu.com">《用戶協議》</a>
				<button>提交</button>
			</form>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:18,
					sex:'female',
					hobby:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	</script>

2.12 內置指令

2.12.1 v-text

向其所在的標簽插入文本

v-text指令：
						1.作用：向其所在的節點中渲染文本內容，
						2.與插值語法的區別：v-text會替換掉節點中的內容，{{xx}}則不會，
<!-- 準備好一個容器-->
		<div id="root">
			<div>你好，{{name}}</div>
			<div v-text="name"></div>
			<div v-text="str"></div>
		</div>

2.12.2 v-html

<!-- 
				v-html指令：
						1.作用：向指定節點中渲染包含html結構的內容，
						2.與插值語法的區別：
									(1).v-html會替換掉節點中所有的內容，{{xx}}則不會，
									(2).v-html可以識別html結構，
						3.嚴重注意：v-html有安全性問題！！！！
									(1).在網站上動態渲染任意HTML是非常危險的，容易導致XSS攻擊，
									(2).一定要在可信的內容上使用v-html，永不要用在用戶提交的內容上！
		-->
		<!-- 準備好一個容器-->
		<div id="root">
			<div>你好，{{name}}</div>
			<div v-html="str"></div>
			<div v-html="str2"></div>
		</div>

2.12.3 v-once

<body>
		<!-- 
			v-once指令：
						1.v-once所在節點在初次動態渲染后，就視為靜態內容了，
						2.以后資料的改變不會引起v-once所在結構的更新，可以用于優化性能，
		-->
		<!-- 準備好一個容器-->
		<div id="root">
			<h2 v-once>初始化的n值是:{{n}}</h2>
			<h2>當前的n值是:{{n}}</h2>
			<button @click="n++">點我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示，
		
		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>

2.12.4 v-pre

<body>
		<!-- 
			v-pre指令：
					1.跳過其所在節點的編譯程序，
					2.可利用它跳過：沒有使用指令語法、沒有使用插值語法的節點，會加快編譯，
		-->
		<!-- 準備好一個容器-->
		<div id="root">
			<h2 v-pre>Vue其實很簡單</h2>
			<h2 >當前的n值是:{{n}}</h2>
			<button @click="n++">點我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示，

		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>

2.13 Vue生命周期

2.13.1 什么是生命周期

				生命周期：
						1.又名：生命周期回呼函式、生命周期函式、生命周期鉤子，
						2.是什么：Vue在關鍵時刻幫我們呼叫的一些特殊名稱的函式，
						3.生命周期函式的名字不可更改，但函式的具體內容是程式員根據需求撰寫的，
						4.生命周期函式中的this指向是vm 或 組件實體物件，

演示

	<body>
		<!-- 
				生命周期：
						1.又名：生命周期回呼函式、生命周期函式、生命周期鉤子，
						2.是什么：Vue在關鍵時刻幫我們呼叫的一些特殊名稱的函式，
						3.生命周期函式的名字不可更改，但函式的具體內容是程式員根據需求撰寫的，
						4.生命周期函式中的this指向是vm 或 組件實體物件，
		-->
		<!-- 準備好一個容器-->
		<div id="root">
			<h2 v-if="a">你好啊</h2>
			<h2 :style="{opacity}">歡迎學習Vue</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示，
		
		 new Vue({
			el:'#root',
			data:{
				a:false,
				opacity:1
			},
			methods: {
				
			},
			//Vue完成模板的決議并把初始的真實DOM元素放入頁面后（掛載完畢）呼叫mounted
			mounted(){
				console.log('mounted',this)
				setInterval(() => {
					this.opacity -= 0.01
					if(this.opacity <= 0) this.opacity = 1
				},16)
			},
		})

		//通過外部的定時器實作（不推薦）
		/* setInterval(() => {
			vm.opacity -= 0.01
			if(vm.opacity <= 0) vm.opacity = 1
		},16) */
	</script>
</html>

借鑒宣告周期圖

2.13.2 宣告周期總結

常用的生命周期鉤子：
				1.mounted: 發送ajax請求、啟動定時器、系結自定義事件、訂閱訊息等【初始化操作】，
				2.beforeDestroy: 清除定時器、解綁自定義事件、取消訂閱訊息等【收尾作業】，

關于銷毀Vue實體
				1.銷毀后借助Vue開發者工具看不到任何資訊，
				2.銷毀后自定義事件會失效，但原生DOM事件依然有效，
				3.一般不會在beforeDestroy操作資料，因為即便操作資料，也不會再觸發更新流程了，

三、Vue組件化編程

3.1組件的理解

組件的定義：實作應用中區域功能代碼和資源的集合

3.2 非單檔案組件

一個檔案中包含n個組件

3.3 組件的基本實用(以后基本不會使用)

Vue中使用組件的三大步驟：
					一、定義組件(創建組件)
					二、注冊組件
					三、使用組件(寫組件標簽)

			一、如何定義一個組件？
						使用Vue.extend(options)創建，其中options和new Vue(options)時傳入的那個options幾乎一樣，但也有點區別；
						區別如下：
								1.el不要寫，為什么？ ——— 最終所有的組件都要經過一個vm的管理，由vm中的el決定服務哪個容器，
								2.data必須寫成函式，為什么？ ———— 避免組件被復用時，資料存在參考關系，
						備注：使用template可以配置組件結構，

			二、如何注冊組件？
							1.區域注冊：靠new Vue的時候傳入components選項
							2.全域注冊：靠Vue.component('組件名',組件)

			三、撰寫組件標簽：
							<school></school>

演示

<body>
    <div id="root">
        <!-- 第三步：撰寫組件標簽 -->
        <student></student>
        <hr>
    </div>
    <script>
        //第一步：創建school組件
        const student=Vue.extend({
            template:`
                <div>
                    <h2>{{student}}</h2>    
                    <h2>{{major}}</h2>    
                </div>
            `,
            // el:'#root', //組件定義時，一定不要寫el配置項，因為最終所有的組件都要被一個vm管理，由vm決定服務于哪個容器，
            data(){
                return {
                  student:"安陽工學院",
                  major:"計算機",
                }
            },
        })
        //第二步：全域注冊組件
		Vue.component('student',student)
        new Vue({
            el:"#root",
            //第二步：注冊組件（區域注冊）
            components:{
                student:student,
            }
        })
    </script>
</body>

3.4 VueComponent

關于VueComponent：
	1.school組件本質是一個名為VueComponent的建構式，且不是程式員定義的，是Vue.extend生成的，

	2.我們只需要寫<school/>或<school></school>，Vue決議時會幫我們創建school組件的實體物件，
							即Vue幫我們執行的：new VueComponent(options)，

	3.特別注意：每次呼叫Vue.extend，回傳的都是一個全新的VueComponent！！！！

	4.關于this指向：
			(1).組件配置中：
				data函式、methods中的函式、watch中的函式、computed中的函式 它們的this均是【VueComponent實體物件】，
			(2).new Vue(options)配置中：
				data函式、methods中的函式、watch中的函式、computed中的函式 它們的this均是【Vue實體物件】，

3.5 模塊化的三種暴露方式

模塊化三種暴露方式

分別暴露

<script>
// 組件交換相關的代碼（資料、方法等）
       export const student=Vue.extend({
            data(){
                return {
                  student:"安陽工學院",
                  major:"計算機",
                }
            },
        })
</script>

同意暴露

<script>
// 組件交換相關的代碼（資料、方法等）
        const student=Vue.extend({
            data(){
                return {
                  student:"安陽工學院",
                  major:"計算機",
                }
            },
        })
        export {school}
</script>

默認暴露（用的較多）

<script>
// 組件交換相關的代碼（資料、方法等）
        export default {
        	name:"和當前vue組件的檔案名同步"
            data(){
                return {
                  student:"安陽工學院",
                  major:"計算機",
                }
            },
        }
        export default school
</script>

四、安裝vue-cli

安裝 vue-cli之前先安裝node

4.1 步驟

使用cmd 管理員

	1. 配置npm淘寶鏡像 防止下載過慢
		npm config set registry https://registry.npm.taobao.org
	2.  全域安裝@Vue/cli
		npm install -g @vue/cli
	3. 創建專案
		vue create 專案名
		創建vue2專案要使用 npm 
	4. 啟動專案
		npm run serve

4.2 檔案結構

在這里插入圖片描述

4.3 ref屬性

	1. 被用來給元素或子組件注冊參考資訊（id的替代者）
	2. 應用在html標簽上獲取的是真實DOM元素,應用在組件標簽上是組件實體物件（VueComponent）
	3. 使用方式
		打標識： <h1 ref="xxx"></h1> 或 <School ref="xxx"></School>
		獲取：this.$refs.xxx

4.4 props屬性

當別人要用我們的組件,資料不一樣時,我們就不能把當前組件的資料寫死,我們需要讓呼叫者給我們這個組件的標簽傳入引數
傳入引數

<template>
  <div>
  	//動態傳入引數
    <Student name="張三" :age="16"></Student>
    <div v-text="msg"></div>
    <button>點我輸出</button>
  </div>
</template>
    
<script>
import Student from "./components/Student.vue";
export default {
  data() {
      return {
          msg: "歡迎學習Vue",
      }
  },
  components: {
    Student,
  },

};
</script>

定義props 接收引數

<template>
    <div>
        <h2>姓名:{{name}}</h2>
        <h2>年齡：{{age}}</h2>
    </div>
</template>

<script>
export default {
    name:"Student",
    data() {
        return {
            // name:"法外狂徒-張三",
            // age:16,
        }
    },
    //簡單宣告接收
    props:["name","age"],
    //接收的同時對資料進行型別的限制
    props:{
        name:String,
        age:Number,
    },
    //接收的同時對資料：進行型別限制+默認值指定+必要性的限制
    props:{
        name:{
            type:String,//name的型別
            required:true,//name是必須要傳的
        },
        age:{
            type:Number,//age的型別
            default:22,//age如果不傳,默認值是22
        }
    }
}
</script>

備注：

	props是只讀的,Vue底層會檢測你對props的修改，如果進行了修改，就會發出警告，若業務需要確實需要修改，那么請賦值props的內容到data中一份,然后去修改data中的資料，

4.5 mixin屬性

mixin(混入)

	功能：可以把多個組件共用的配置提取成一個混入物件
	使用方式：
		第一步定義混合,例如：
			export default {
				data(){...},
				methods:{...},
				...
			}
		第二步使用混入,例如：
			1. 全域混入：Vue.mixin(xxx)
			2. 區域混入：mixins:[xxx]

4.6 插件

功能：用于增強Vue
本質：包含install方法的一個物件,install的第一個引數是Vue,第二個以后的引數是插件使用者傳遞的資料，

	定義插件：
		export default{
			install(Vue){
				插件,
				插件,
				...
			}
		}
	使用插件：
		引入插件：
			import plugins from "插件的js檔案"
		應用插件：
			Vue.use(plugins)

4.7 scoped樣式

作用：讓樣式在區域(每個組件中)生效,防止沖突
寫法：

4.8 組件自定義事件

一種組件之間的通信方式,適用于子組件===>父組件

寫法1：

組件Student.vue

<template>
    <div>
        <h2>姓名:{{name}}</h2>
        <h2>年齡：{{age}}</h2>
        
        <button @click="sendStudentName">觸發mk事件</button>
    </div>
</template>

<script>
export default {
    name:"Student",
    data() {
        return {
            name:"法外狂徒-張三",
            age:16,
        }
    },
    methods:{
        sendStudentName(){
            //觸發Student組件實體物件身上的mk事件
            this.$emit("mk",this.name);
        }
    }
}
</script>

<style>
</style>

App.vue

<template>
  <div>
  	//自定義組件 名稱 mk 當觸發了mk事件 呼叫 demo方法
    <Student v-on:mk="demo"></Student>
    <div v-text="msg"></div>
  </div>
</template>
    
<script>
import Student from "./components/Student.vue";
export default {
  data() {
      return {
          msg: "歡迎學習Vue",
      }
  },
  methods:{
    demo(name){
      console.log("demo方法被呼叫了",name);
    }
  },
  components: {
    Student,
  },

};
</script>

寫法2：

組件Student.vue

<template>
    <div>
        <h2>姓名:{{name}}</h2>
        <h2>年齡：{{age}}</h2>

        <button @click="sendStudentName">觸發t1事件</button>
    </div>
</template>

<script>
export default {
    name:"Student",
    data() {
        return {
            name:"法外狂徒-張三",
            age:16,
        }
    },
    methods:{
        sendStudentName(){
            //觸發Student組件實體物件身上的mk事件
            this.$emit("t1",this.name);
        }
    }
}
</script>

App.vue

<template>
  <div>
    <Student ref="t1"></Student>
    <div v-text="msg"></div>
  </div>
</template>
    
<script>
import Student from "./components/Student.vue";
export default {
  data() {
      return {
          msg: "歡迎學習Vue",
      }
  },
  methods:{
    demo(name){
      console.log("demo方法被呼叫了");
    }
  },
  //當App.vue中的資料創建好后,會觸發mounted方法執行
  mounted() {
    //this.$refs.mk會拿到mk的這個組件實體物件
    //給mk這個組件實體物件系結 自定義事件t1,當t1這個自定義事件被觸發呼叫 demo方法
    this.$refs.mk.$on("t1",this.demo);
  },
  components: {
    Student,
  },

};
</script>

4.9 解綁自定義事件

組件Student.vue 解綁自定義事件

<script>
export default {
    name:"Student",
    data() {
        return {
            name:"法外狂徒-張三",
            age:16,
        }
    },
    methods:{
        sendStudentName(){
            //觸發Student組件實體物件身上的mk事件
            this.$emit("t1",this.name);
            this.$emit("t2",this.age);
        },
        unbind(){
            this.$off("t1");//解綁一個自定義事件
            this.$off(["t1","t2"]);//解綁多個自定義事件
            this.$off();//解綁所有自定義事件
        }
    }
}
</script>

App.vue

<script>
import Student from "./components/Student.vue";
export default {
  data() {
      return {
          msg: "歡迎學習Vue",
      }
  },
  methods:{
    demo(name){
      console.log("demo方法被呼叫了");
    },
    t2(age){
      console.log(age);
    }
  },
  //當App.vue中的資料創建好后,會觸發mounted方法執行
  mounted() {
    //this.$refs.mk會拿到mk的這個組件實體物件
    //給mk這個組件實體物件系結 自定義事件t1,當t1這個自定義事件被觸發呼叫 demo方法
    this.$refs.mk.$on("t1",this.demo);
    this.$refs.mk.$on("t2",this.t2);
  },
  components: {
    Student,
  },

};
</script>

4.10 全域事件總線(開發中用的較多)

全域時間總線：任意組件之間的通信

安裝全域事件總線 main.js

//引入Vue
import Vue from "vue"
import App from './App.vue'
//關閉生產提示
Vue.config.productionTip=false
new Vue({
    //將App組件放入到容器中
    render:h=>h(App),
    beforeCreate() {
        Vue.prototype.$bus=this;//安裝全域事件總線,this指的是當前應用的vm
    },
}).$mount("#app")

使用全域事件總線：A想接受資料

export default {
  data() {
      return {
          msg: "歡迎學習Vue",
      }
  },
  methods:{
    demo(name){
      console.log("demo方法被呼叫了");
    },
    t2(age){
      console.log(age);
    },
    t3(data){
      console.log("全域事件總線===>",data);
    }
  },
  //當App.vue中的資料創建好后,會觸發mounted方法執行
  mounted() {
    //給$bus這個全域事件總線系結 自定義事件hello,當hello這個自定義事件被觸發呼叫 this.t3方法
    this.$bus.$on("hello",this.t3);
  },
  components: {
    Student,
  },

};

使用全域事件總線：

export default {
    name:"Student",
    data() {
        return {
            name:"法外狂徒-張三",
            age:16,
        }
    },
    methods:{
        sendStudentName(){
            //觸發全域事件總線身上的hello事件,給hello的回呼方法傳參
            this.$bus.$emit("hello",this.name);
        },
        beforeDestroy(){
        //最好用beforeDestory鉤子中,用$off("事件名")去解綁當前組件所用到的事件
        this.$bus.$off("hello");
    	}
    }
}

4.11 Vue過度影片

<template>
  <div>
      <button @click="isShow = !isShow">顯示/隱藏</button>
      <!-- Vue內置影片標簽,把影片放入即可
        appear：打開瀏覽器影片從無到有
        name:若給name賦予了名字,那么Vue定義的影片類名 必須寫為： xxx-enter/leave-active
       -->
      <transition name="xxx" appear>   
            <h1 v-show="isShow" >你好啊</h1>
      </transition>
  </div>
</template>

<script>
export default {
    name:"Test",
    data() {
        return {
            isShow:true,
        }
    },
}
</script>

<style>
    h1{
        background-color: orange;
    }
    /* Vue定義的影片起始類名 */
    .v-enter-active{
        animation: ani 1s;
    }
        /* Vue定義的影片反轉類名 */
    .v-leave-active{
        animation: ani 1s reverse;
    }
    /* 定義一個影片 */
    @keyframes ani {
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>

4.11.1 繼承第三方影片庫

animate第三方影片庫官網

使用

	0. 下載animate.css
		npm install animate.css --save
	1. 引入animate.css檔案
		import 'animate.css'
	2. 在Vue影片標簽上的name屬性寫入影片庫指定的名稱
		name="animate__animated animate__bounce"
	3. 在Vue影片標簽上寫入進場影片類名和退場影片類名
		enter-active-class="進場效果" leave-active-class="退場效果"
	4. 效果去官方獲取想要的寫入類名即可

測驗

<template>
  <div>
      <button @click="isShow = !isShow">顯示/隱藏</button>
      <!-- Vue內置影片標簽,把影片放入即可
        appear：打開瀏覽器影片從無到有
        name:若給name賦予了名字,那么Vue定義的影片類名 必須寫為： xxx-enter/leave-active
       -->
      <transition name="animate__animated animate__bounce" enter-active-class="animate__bounce" leave-active-class="animate__backOutUp" appear>   
            <h1 v-show="isShow"  >你好啊</h1>
      </transition>
  </div>
</template>

<script>
import 'animate.css'
export default {
    name:"Test",
    data() {
        return {
            isShow:true,
        }
    },
}
</script>

<style>
    h1{
        background-color: orange;
    }
</style>

五、Axios

5.1 使用axios

下載axios

	npm i axios

參考axios

	import axios from 'axios'

5.2 Vue腳手架配置代理

解決跨域問題

方法一：在vue.config.js中添加如下配置

//配置代理物件
devServer: {
    proxy: 'http://localhost:后端埠號'
  }

說明：
1. 優點：配置簡單,請求資源時直接發給前端(8080)即可
2. 缺點：不能配置多個代理,不能靈活控制請求是否走代理
3. 作業方式：若按照上述配置代理,當請求了前端不存在的資源時,那么該請求會轉發給服務器(有限匹配前端資源)

方法二

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'開頭的請求路徑
        target: 'http://localhost:5000',// 代理目標的基礎路徑
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}//把以api1開頭的路徑去掉發送給target路徑
      },
      '/api2': {// 匹配所有以 '/api2'開頭的請求路徑
        target: 'http://localhost:5001',// 代理目標的基礎路徑
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin設定為true時，服務器收到的請求頭中的host為：localhost:5000
   changeOrigin設定為false時，服務器收到的請求頭中的host為：localhost:8080
   changeOrigin默認值為true
*/

前臺發送請求

export default {
    methods: {
        getStu(){
            axios.get("http://localhost:8080/api1/students").then(
                response=>{
                    console.log("請求成功了",response,response.data);
                },error=>{
                    console.log("請求失敗了",error,error.message);
                }
            )
        }
    },
  

};

說明：

優點：可以配置多個代理，且可以靈活的控制請求是否走代理，
缺點：配置略微繁瑣，請求資源時必須加前綴，

5.3 插槽

作用：讓父組件可以向子組件指定位置插入html結構，也是一種組件間通信的方式，適用于父組件 ===> 子組件，
分類：默認插槽、具名插槽、作用域插槽

默認插槽

父組件中：
        <Student>
           <div>html結構1</div>
        </Student>
子組件中：
        <template>
            <div>
               <!-- 定義插槽 -->
               <slot>插槽默認內容...</slot>
            </div>
        </template>

具名插槽

父組件中：
        <Student>
            <template slot="center">
              <div>html結構1</div>
            </template>

            <template v-slot:footer>
               <div>html結構2</div>
            </template>
        </Category>
子組件中：
        <template>
            <div>
               <!-- 定義插槽 -->
               <slot name="center">插槽默認內容...</slot>
               <slot name="footer">插槽默認內容...</slot>
            </div>
        </template>

作用域插槽

理解：資料在組件的自身，但根據資料生成的結構需要組件的使用者來決定，(資料在Stu組件中,但使用資料遍歷出來的解構由App主組件決定)

父組件中：
		<Stu>
			//scope中定義的變數名就是子組件中定義的games所有資料(名字不強制要求可以隨意)
			<template scope="scopeData">
				<!-- 生成的是ul串列 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Stu>

		<Stu>
			<template slot-scope="scopeData">
				<!-- 生成的是h4標題 -->
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
			</template>
		</Stu>
子組件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
		
        <script>
            export default {
                name:'Stu',
                props:['title'],
                //資料在子組件自身
                data() {
                    return {
                        games:['紅色警戒','穿越火線','勁舞團','超級瑪麗']
                    }
                },
            }
        </script>

六、Vuex

在這里插入圖片描述

6.1概念

在Vue中實作集中式狀態（資料）管理的一個Vue插件，對vue應用中多個組件的共享狀態進行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信，
何時使用？多個組件需要共享資料時

6.2 搭建Vuex環境

創建檔案：src/store/index.js

//引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//應用Vuex插件
Vue.use(Vuex)

//準備actions物件——回應組件中用戶的動作
const actions = {}
//準備mutations物件——修改state中的資料
const mutations = {}
//準備state物件——保存具體的資料
const state = {}

//創建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

在main.js中創建vm時傳入store配置項

......
//引入store
import store from './store/index.js'
......

//創建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})

6.3 基本使用

初始化資料、配置actions、配置mutations，操作檔案store.js

//引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//參考Vuex
Vue.use(Vuex)

const actions = {
    //回應組件中加的動作
	jia(context,value){
		// console.log('actions中的jia被呼叫了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
    //執行加
	JIA(state,value){
		// console.log('mutations中的JIA被呼叫了',state,value)
		state.sum += value
	}
}

//初始化資料
const state = {
   sum:0
}

//創建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

組件中讀取vuex中的資料：$store.state.sum
組件中修改vuex中的資料：$store.dispatch('action中的方法名',資料)或 $store.commit('mutations中的方法名',資料)
備注：若沒有網路請求或其他業務邏輯，組件中也可以越過actions，即不寫dispatch，直接撰寫commit

6.5 getters

概念：當state中的資料需要經過加工后再使用時，可以使用getters加工，
在store/index.js中追加getters配置

const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//創建并暴露store
export default new Vuex.Store({
	......
	getters
})

七、路由

理解：一個路由（route）就是一組映射關系（key - value），多個路由需要路由器（router）進行管理，
前端路由：key是路徑，value是組件， 當訪問key路徑時,指定的位置會展示指定的組件
注意點
1. 路由組件通常存放在pages檔案夾，一般組件通常存放在components檔案夾，
2. 通過切換，“隱藏”了的路由組件，默認是被銷毀掉的，需要的時候再去掛載，
3. 每個組件都有自己的$route屬性，里面存盤著自己的路由資訊，
4. 整個應用只有一個router，可以通過組件的$router屬性獲取到，

7.1 基本使用

安裝vue-router路由命令: npm i vue-router
應用插件：Vue.use(引入路由的自定義名稱)
撰寫route配置:在src下創建index.js配置路由 src/index.js

//該檔案專門用于創建整個應用的路由器
//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 組件
import About from '../components/About'
import Home from '../components/Home'

//創建router實體物件，去管理一組一組的路由規則
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

實作切換（active-class可配置高亮樣式）

<router-link active-class="active" to="/home(路由中配置的路徑)">About</router-link>

指定展示位置

	<router-view></router-view>

7.2 多級路由（覆寫路由）

在一個路由規則中再定義路由

配置路由規則，使用children配置項：

//創建一個路由器
export default new VueRouter({
    //路由
    routes:[
        {
            path:'/about',component:About,
            
        },
        {
            path:'/home',component:Home,       
            //配置子級路由
            children:[
                {
                    //此處不要加 /
                    path:"news",
                    component:News,
                },
                {
                    path:"message",
                    component:Message,
                }
            ]
        },
    ]
})

跳轉（要寫完整路徑）：

<router-link to="/home/news">News</router-link>

7.3 路由的query引數

當我們利用router路由發送請求時,可以攜帶一些引數進行傳遞

傳遞引數

<template>
  <div>
    <ul>
    <!-- 跳轉并攜帶query引數，to的字串寫法 -->
      <li v-for="data in DataList" :key="data.id">
        <router-link :to="`/home/message/detail?id=${data.id}&title=${data.title}`">{{data.title}}</router-link>
      </li>
      <li v-for="data in DataList" :key="data.id">
        <router-link :to="{
          path:'/home/message/detail',
          query:{
            id:data.id,
            title:data.title,
          }
        }">
        {{data.title}}
        </router-link>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>

</template>

<script>
export default {
    name:"Message",
    data() {
      return {
        DataList:[
          {id:"001",title:"message001"},
          {id:'002',title:"message002"},
          {id:'003',title:"message003"},
        ]
      }
    },
};
</script>

接收引數

<template>
    <ul>
        <li>訊息編號：{{$route.query.id}}</li>
        <li>訊息詳情：{{$route.query.title}}</li>
    </ul>
</template>
$route.query.id
$route.query.title

7.4 命名路由

作用可以簡化路由的跳轉，
如何使用？
2.1 給路由命名

//創建一個路由器
export default new VueRouter({
    //路由
    routes:[
        {
            path:'/about',component:About,
            
        },
        {
            path:'/home',component:Home,       
            //配置子級路由
            children:[
                {
                    //此處不要加 /
                    path:"news",
                    component:News,
                },
                {
                    path:"message",
                    component:Message,
                    children:[
                        {
                            name:"detail",//給當前路由命名
                            path:"detail",
                            component:Detail,
                        }
                    ]
                }
            ]
        },
    ]
})

2.2 簡化跳轉：

<!--簡化前，需要寫完整的路徑 -->
<router-link to="/demo/test/detail">跳轉</router-link>

<!--簡化后，直接通過名字跳轉 -->
<router-link :to="{name:'detail'}">跳轉</router-link>

<!--簡化寫法配合傳遞引數 -->
<router-link 
	:to="{
		name:'detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳轉</router-link>

7.5 路由的params引數(RestFul風格)

在router/index.js配置路由，宣告接收params引數使用 :引數名來當占位符

{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符宣告接收params引數
					component:Detail
				}
			]
		}
	]
}

傳遞引數

<!-- 跳轉并攜帶params引數，to的字串寫法 -->
<router-link :to="/home/message/detail/666/你好">跳轉</router-link>
				
<!-- 跳轉并攜帶params引數，to的物件寫法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳轉</router-link>

特別注意：路由攜帶params引數時，若使用to的物件寫法，則不能使用path配置項，必須使用name配置！

7.7 路由的props配置

在router/index.js中配置作用：讓路由組件更方便的收到引數

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一種寫法：props值為物件，該物件中所有的key-value的組合最終都會通過props傳給Detail組件
	// props:{a:900}

	//第二種寫法：props值為布林值，布林值為true，則把路由收到的所有params引數(RestFul風格傳參)通過props傳給Detail組件
	// props:true
	
	//第三種寫法：props值為函式，該函式回傳的物件中每一組key-value都會通過props傳給Detail組件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

接收props

<template>
    <ul>
        <li>訊息編號：{{$route.query.id}}</li>
        <li>訊息詳情：{{$route.query.title}}</li>
        <li>訊息詳情：{{id}}</li>
        <li>訊息詳情：{{title}}</li>
    </ul>
</template>

<script>
export default {
    name:"Detail",
    props:['id','title'],
    mounted(){
        console.log(this);
    }
}
</script>

7.8 編程式路由導航

作用：不借助<router-link>實作路由跳轉，讓路由跳轉更加靈活

//$router的兩個API
this.$router.push({
	name:'detail',
		params:{
			id:xxx,
			msg:xxx,
		}
})
//會覆寫上一次點擊的記錄
this.$router.replace({
	name:'detail',
		params:{
			id:xxx,
			msg:xxx,
		}
})
this.$router.forward() //前進
this.$router.back() //后退
this.$router.go() //可前進也可后退(正數代表向前走幾次路徑,負數代表向后退幾次路徑)

7.9 快取路由組件

作用：讓不展示的路由組件保持掛載，不被銷毀，
撰寫：若include不寫默認router-view中所有呈現的組件都會保持掛載

<keep-alive include="組件名"> 
    <router-view></router-view>
</keep-alive>

7.10 兩個新的生命周期鉤子

作用：路由組件所獨有的兩個鉤子，用于捕獲路由組件的激活狀態，
兩個路由名字：
1. activated路由組件被激活時觸發，
2. deactivated路由組件失活時觸發，

<template>
  <ul>
    <li>news001 <input type="text"></li>
    <li>news002 <input type="text"></li>
    <li>news003 <input type="text"></li>
  </ul>
</template>

<script>
export default {
  name: "News",
  activated() {
    console.log("News組件被激活了");
  },
  deactivated(){
    console.log("News組件沒有被激活");
  }
};
</script>

7.11 路由守衛

作用：對路由進行權限控制
分類：全域守衛、獨享守衛、組件內守衛

7.11.1 全域加守衛

//創建一個路由器
const router= new VueRouter({
    //路由
    routes:[
        {
            path:'/about',component:About,
            
        },
        {
            path:'/home',component:Home,       
            //配置子級路由
            children:[
                {
                    //此處不要加 /
                    path:"news",
                    component:News,
                },
                {
                    path:"message",
                    component:Message,
                    children:[
                        {
                            name:"detail",//給當前路由命名
                            //自定義屬性必須放在meta中
                            meta:{a:true},
                            path:"detail",
                            component:Detail,
                        }
                    ]
                }
            ]
        },
    ]
})
//全域前置守衛：初始化時執行、每次路由切換前執行
router.beforeEach((to,from,next)=>{
	// 引數1：to 當前路由要去哪兒
	//引數2：from 當前路由從哪兒來
	//引數3：放行
	if(判斷條件 或者 to.meta.a(自定義引數進行判斷)){ //判斷當前路由是否需要進行權限控制
			next() //放行
	}else{
		//不放行
	}
})

//全域后置守衛：初始化時執行、每次路由切換后執行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
})
export default router

7.11.2 獨享守衛

//創建一個路由器
const router= new VueRouter({
    //路由
    routes:[
        {
            path:'/about',component:About,
            
        },
        {
            path:'/home',component:Home,       
            //配置子級路由
            children:[
                {
                    //此處不要加 /
                    path:"news",
                    component:News,
                },
                {
                    path:"message",
                    meta:{a:true},
                    component:Message,
                    children:[
                        {
                            name:"detail",//給當前路由命名
                            path:"detail",
                            component:Detail,
                        }
                    ],
                    //獨享路由守衛
                    beforeEnter(to,from,next){
                        console.log('beforeEnter',to,from)
                        if(to.meta.a){ //判斷當前路由是否需要進行權限控制
                                next()
                        }
                    }
                }
            ]
        },
    ]
})

export default router

7.11.3 組件守衛

<template>
  <ul>
    <li>news001 <input type="text"></li>
    <li>news002 <input type="text"></li>
    <li>news003 <input type="text"></li>
  </ul>
</template>

<script>
export default {
  name: "News",
  activated() {
    console.log("News組件被激活了");
  },
  deactivated(){
    console.log("News組件沒有被激活");
  },
  //進入守衛：通過路由規則，進入該組件時被呼叫
  beforeRouteEnter (to, from, next) {
  },
  //離開守衛：通過路由規則，離開該組件時被呼叫
  beforeRouteLeave (to, from, next) {
  }
};
</script>

7.12 路由的兩種作業模式

對于一個url來說，什么是hash值？—— #及其后面的內容就是hash值，
hash值不會包含在 HTTP 請求中，即：hash值不會帶給服務器，
hash模式：
1. 地址中永遠帶著#號，不美觀，
2. 若以后將地址通過第三方手機app分享，若app校驗嚴格，則地址會被標記為不合法，
3. 兼容性較好，
history模式：
1. 地址干凈，美觀，
2. 兼容性和hash模式相比略差，
3. 應用部署上線時需要后端人員支持，解決重繪頁面服務端404的問題，

8、Element-UI組件庫

官網

# 總結提示：這里對文章進行總結：例如：以上就是今天要講的內容，本文僅僅簡單介紹了pandas的使用，而pandas提供了大量能使我們快速便捷地處理資料的函式和方法，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305715.html

標籤：其他

上一篇：vue入門基礎教程之經驗總結篇（小白入門必備）|建議收藏

下一篇：基于Echarts的網橋拓撲結構可視化模擬

Vue保姆級教程

文章目錄

一、Vue

1.1 Vue介紹

1.2 Vue特點

1.3 Vue周邊庫

二、初始Vue

2.1 插值語法

2.2 指令語法

2.2.1 v:bind / 簡寫 : 指令 單向資料系結

2.2.2 v-model 雙向資料系結

2.3 事件處理

2.4 事件修飾符

2.5 鍵盤事件

2.6 計算屬性

2.7 監聽屬性

2.8 計算屬性與監聽屬性之間的區別

2.9 條件渲染

2.10 條件渲染

2.11 收集表單資料的細節

2.12 內置指令

2.12.1 v-text

2.12.2 v-html

2.12.3 v-once

2.12.4 v-pre

2.13 Vue生命周期

2.13.1 什么是生命周期

2.13.2 宣告周期總結

三、Vue組件化編程

3.1組件的理解

3.2 非單檔案組件

3.3 組件的基本實用(以后基本不會使用)

3.4 VueComponent

3.5 模塊化的三種暴露方式

四、安裝vue-cli

4.1 步驟

4.2 檔案結構

4.3 ref屬性

4.4 props屬性

4.5 mixin屬性

4.6 插件

4.7 scoped樣式

4.8 組件自定義事件

4.9 解綁自定義事件

4.10 全域事件總線(開發中用的較多)

4.11 Vue過度影片

4.11.1 繼承第三方影片庫

五、Axios

5.1 使用axios

5.2 Vue腳手架配置代理

5.3 插槽

六、Vuex

6.1概念

6.2 搭建Vuex環境

6.3 基本使用

6.5 getters

七、路由

7.1 基本使用

7.2 多級路由（覆寫路由）

7.3 路由的query引數

7.4 命名路由

7.5 路由的params引數(RestFul風格)

7.7 路由的props配置

7.8 編程式路由導航

7.9 快取路由組件

7.10 兩個新的生命周期鉤子

7.11 路由守衛

7.11.1 全域加守衛

7.11.2 獨享守衛

7.11.3 組件守衛

7.12 路由的兩種作業模式

8、Element-UI組件庫

2.2.1 v:bind / 簡寫 : 指令單向資料系結