當前位置：首頁 > 前端技术 > vue >内容正文

vue

尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P101-135]

發布時間：2023/12/31 vue 35 豆豆

生活随笔收集整理的這篇文章主要介紹了尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P101-135] 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?視頻鏈接：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs從入門到精通_嗶哩嗶哩_bilibili

P1-50：尚硅谷Vue2.0+Vue3.0全套教程視頻筆記 + 代碼 [P001-050]_小白桶子的博客-CSDN博客

P51-100：尚硅谷Vue2.0+Vue3.0全套教程視頻筆記 + 代碼 [P051-100]_小白桶子的博客-CSDN博客

P101-135：當前頁面。

P101-110：

- P101 - vue-resource

課堂筆記：

（1）安裝指令：npm i vue-resource

（2）這個庫官方已不維護，轉交的團隊維護頻率低，僅當了解，最好還是使用axios。

- P102 - 默認插槽

（總結在P104）本節部分代碼：

App.vue頁面：

<template><div class="container"><Category title="美食"><img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""/></Category><Category title="游戲"><ul><li v-for="(g,index) in games" :key="index">{{g}}</li></ul></Category><Category title="電影"><video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video></Category></div> </template><script> import Category from './components/Category.vue'; export default {name: "App",components: { Category },data() {return {foods:['火鍋','燒烤','小龍蝦','牛排'],games:['紅色警戒','穿越火線','勁舞團','超級瑪麗'],films:['《教父》','《拆彈專家》','《你好，李煥英》','《尚硅谷》']}}, } </script><style> .container{display: flex;justify-content: space-around; } img{width: 100%; } video{width: 100%; } </style>

Category.vue頁面：

<template><div class="category"><h3>{{title}}分類</h3><slot>我是一個默認值，當使用者沒有傳遞具體結構時，我會出現</slot></div> </template><script> export default {name:'Category',props:['title'] } </script><style scoped> .category{background-color: skyblue;width: 200px;height: 300px; } h3{text-align: center;background-color: orange; }</style>

- P103 - 具名插槽

（總結在P104）本節部分代碼：

App.vue頁面：

<template><div class="container"><Category title="美食"><img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""/><a slot="footer" href="http://www.atguigu.com">更多美食</a></Category><Category title="游戲"><ul slot="center"><li v-for="(g,index) in games" :key="index">{{g}}</li></ul><div class="foot" slot="footer"><a href="http://www.atguigu.com">單機游戲</a><a href="http://www.atguigu.com">網絡游戲</a></div></Category><Category title="電影"><video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video><template v-slot:footer><div class="foot"><a href="http://www.atguigu.com">經典</a><a href="http://www.atguigu.com">熱門</a><a href="http://www.atguigu.com">推薦</a></div><h4>歡迎前來觀影</h4></template></Category></div> </template><script> import Category from './components/Category.vue'; export default {name: "App",components: { Category },data() {return {foods:['火鍋','燒烤','小龍蝦','牛排'],games:['紅色警戒','穿越火線','勁舞團','超級瑪麗'],films:['《教父》','《拆彈專家》','《你好，李煥英》','《尚硅谷》']}}, } </script><style> .container,.foot{display: flex;justify-content: space-around; } img{width: 100%; } video{width: 100%; } h4{text-align: center; } </style>

Category.vue頁面：

<template><div class="category"><h3>{{title}}分類</h3><slot name="center">我是一個默認值，當使用者沒有傳遞具體結構時，我會出現1</slot><slot name="footer">我是一個默認值，當使用者沒有傳遞具體結構時，我會出現2</slot></div> </template><script> export default {name:'Category',props:['title'] } </script><style scoped> .category{background-color: skyblue;width: 200px;height: 300px; } h3{text-align: center;background-color: orange; }</style>

- P104 - 作用域插槽

老師總結：

插槽：

????????1.作用：讓父組件可以向子組件指定位置插入html結構，也是一種組件間通信的方式，適用于父組件 ===>子組件。

????????2.分類：默認插槽、具名插槽、作用域插槽。

????????3.使用方式：

????????????????（1）默認插槽：

父組件中：<Category><div>html結構1</div></Category> 子組件中：<template><div><slot>插槽默認內容...</slot></div></template>

????????????????（2）具名插槽：

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

????????????????（3）作用域插槽：

????????????????????????①理解：數據在組件的自身，但根據數據生成的結構需要組件的使用者來決定。（games數據在Category組件中，但使用數據所遍歷出來的結構由App組件決定）

????????????????????????②具體編碼：

父組件中：<Category><template scope="scopeData"><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template></Category><Category><template scope="{games}"><h4 v-for="g in games" :key="g">{{g}}</h4></template></Category> 子組件中：<template><div><slot :games="games"></slot></div></template><script>export default {name:'Category',//數據在子組件自身data() {return {games:['紅色警戒','穿越火線','勁舞團','超級瑪麗'],}},}</script>

本節部分代碼：

App.vue頁面：

<template><div class="container"><Category title="游戲"><template scope="atguigu"><ul><li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li></ul></template></Category><Category title="游戲"><template scope="{games}"><ol><li v-for="(g,index) in games" :key="index">{{g}}</li></ol></template></Category><Category title="游戲"><template scope="{games}"><h4 v-for="(g,index) in games" :key="index">{{g}}</h4></template></Category></div> </template><script> import Category from './components/Category.vue'; export default {name: "App",components: { Category } } </script><style> .container,.foot{display: flex;justify-content: space-around; } img{width: 100%; } video{width: 100%; } h4{text-align: center; } </style>

Category.vue頁面：

<template><div class="category"><h3>{{title}}分類</h3><slot :games="games">我是默認的一些內容</slot></div> </template><script> export default {name:'Category',props:['title'],data() {return {games:['紅色警戒','穿越火線','勁舞團','超級瑪麗'],}}, } </script><style scoped> .category{background-color: skyblue;width: 200px;height: 300px; } h3{text-align: center;background-color: orange; }</style>

- P105 - Vuex簡介

課堂筆記：

（1）老師的課件圖：

老師總結：

vuex是什么：

????????1.概念：專門在Vue中實現集中式狀態（數據）管理的一個Vue插件，對Vue應用中對各組件的共享狀態進行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信。

????????2.Github地址：GitHub - vuejs/vuex: 🗃? Centralized State Management for Vue.js.

什么時候用Vuex：

????????1.多個組件依賴于同一狀態

????????2.來自不同組件的行為需要變更同一狀態

- P106 - 求和案例_純vue版

課堂筆記：

（1）關于select的option值問題：

????????為什么value前面加冒號有效？不加就是字符串。加上冒號之后，引號里的內容都會當成JS表達式去分析，就變成了數字。

????????最好的做法還是在v-model中加number修飾符。但是上面那個方法也要清楚。

本節部分代碼：

Count.vue頁面：

<template><div><h1>當前求和為：{{sum}}</h1><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">當前求和為奇數再加</button><button @click="incrementWait">等一等再加</button></div> </template><script> export default {name:'Count',data() {return {n:1, //用戶選擇的數字sum:0 //當前的和}},methods: {increment(){this.sum += this.n},decrement(){this.sum -= this.n},incrementOdd(){if(this.sum % 2){this.sum += this.n}},incrementWait(){setTimeout(() => {this.sum += this.n}, 500);}}, } </script><style scoped> button{margin-left: 5px; }</style>

- P107 - Vuex工作原理圖

課堂筆記：

（1）圖：

（2）圖總流程簡述：

????????①State：把數據交給Vuex其實就是把數據交給Vuex中的state。這個state的本質就是Object對象（本節的例子是{ ... sum:0 }）。

????????②Vue Components：把數據遞給Vue組件。在組件中調用API，為dispatch。

dispatch在調用的時候需要傳兩個參數，分別是動作類型和值（如dispatch( 'jia',2 )）。

????????③Actions：本質也是一個Object對象。

????????????????在調用了dispatch之后，Actions里面一定會有一個key，和該動作對應（如{ ... jia:function }）。

????????????????這個函數一旦被調用，就會收到dispatch傳的值（如2）。

????????????????在這個對應的函數中，自己調用commit（如commit( 'jia',2 )）。提交后繼續往下走。

????????④Mutations：數據類型也是一個Object對象。

????????????????其中也會有很多key value，但是肯定會有之前傳入的動作（如{ ... jia:function }）。

????????????????這個函數會拿到兩個東西，一個是整個state，還有一個是傳過來的值（如2）。只要函數中寫了“ state.sum += 2 ”，那么Mutate就會自動執行。

????????⑤再到State：最后State中的值變了（如{ ... sum:2}）。通過Render重新渲染傳給組件。

（3）圖其它解析：

????????①為什么需要Actions，而不是直接傳給Mutations來Mutate？

????????????????Actions對接Backend API（后端接口），它是用來執行異步操作的。

????????②如果已經有了數據的話，官方是允許Vue Components直接Commit給Mutations的。

????????③Devtools是vuex官方開發的瀏覽器插件。

????????④圖中沒畫出來的是，Vuex中的Actions、Mutations、State都需要經過store管理。dispatch、commit都是由store提供的。

（4）老師的比喻，助理解：

????????Vue Components是客人，Actions是服務員，Mutations是后廚團隊，State就是最終上的菜。

????????客人張嘴說話就是dispatch，客人點單蛋炒飯一份，就相當于dispatch( 'jia',2 )。

????????服務員收到后，將具體的單交給后廚團隊就是commit。

????????后廚收到菜單后做菜就是Mutate。

????????最后做出菜Statue，給客人上菜。

????????如果客人跟后廚很熟（不需要服務員的菜單Backend API調用數據），也可以直接跳過服務員Actions，跟后廚講一下，上菜就好了。

- P108 - 搭建Vuex環境

課堂筆記：

（1）Vuex安裝指令：npm i vuex@3

????????（如果直接npm i vuex，那么安裝的是vuex4，只能在Vue3中使用）

老師總結：

搭建vuex環境

????????1.創建文件：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 })

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

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

- P109 - 求和案例_vuex版

無

本節部分代碼：

store.js頁面：

// 該文件用于創建Vuex中最為核心的store // 引入Vue import Vue from 'vue' // 引入Vuex import Vuex from 'vuex' // 應用Vuex插件 Vue.use(Vuex)// 準備actions——用于響應組件中的動作 const actions = {/* jia(context,value){// console.log('actions中的jia被調用了',context,value)context.commit('JIA',value)},jian(context,value){// console.log('actions中的jian被調用了',context,value)context.commit('JIAN',value)}, */jiaOdd(context,value){if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){setTimeout(() =>{context.commit('JIA',value)},500)}, } // 準備mutations——用于操作數據（state） const mutations = {JIA(state,value){// console.log('mutations中的JIA被調用了',state,value)state.sum += value},JIAN(state,value){// console.log('mutations中的JIAN被調用了',state,value)state.sum -= value}} // 準備state——用于存儲數據 const state = {sum:0 //當前的和 }// 創建并暴露store export default new Vuex.Store({actions,mutations,state })

Count.vue頁面：

<template><div><h1>當前求和為：{{$store.state.sum}}</h1><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">當前求和為奇數再加</button><button @click="incrementWait">等一等再加</button></div> </template><script> export default {name:'Count',data() {return {n:1, //用戶選擇的數字}},methods: {increment(){this.$store.commit('JIA',this.n)},decrement(){this.$store.commit('JIAN',this.n)},incrementOdd(){this.$store.dispatch('jiaOdd',this.n)},incrementWait(){setTimeout(() => {this.$store.dispatch('jiaWait',this.n)}, 500);}}, } </script><style scoped> button{margin-left: 5px; }</style>

- P110 - vuex開發者工具的使用

課堂筆記：

（1）vue控制臺切換：

老師視頻里是這樣的：

我這里的更新了，和老師的不一樣，直接選這個：

P111-120：

- P111 - getters配置項

課堂筆記：

（1）state和getters的關系就像data和computed的關系。

（2）不是說數據處理必須要用這個，在數據處理邏輯復雜，且需要復用的情況下推薦使用。

老師總結：

1.概念：當state中的數據需要經過加工后再使用時，可以使用getters加工。

2.在store.js中追加getters配置：

...... const getters = {bigSum(state){return state.sum*10} } ...... // 創建并暴露store export default new Vuex.Store({actions,mutations,state,getters })

3.組件中讀取數據：$store.getters.bigSum

- P112 - mapState和mapGetters

課堂筆記：

（1）ES6中的 ... 為擴展運算符，能將 [ 數組 ] 或對象轉換為逗號分隔的參數序列。

老師總結：

四個map方法的使用（前兩個）：

????????1.mapState方法：用于幫助我們映射state中的數據為計算屬性

computed:{ // 借助mapState生成計算屬性，從state中讀取數據。（對象寫法）...mapState({sum:'sum',school:'school',subject:'subject'}),// 借助mapState生成計算屬性，從state中讀取數據。（數組寫法）...mapState(['sum','school','subject']), },

????????2.mapGetters方法：用于幫助我們映射getters中的數據為計算屬性

computed:{ // 借助mapGetters生成計算屬性，從getters中讀取數據。（對象寫法）...mapGetters({bigSum:'bigSum'}),// 借助mapGetters生成計算屬性，從getters中讀取數據。（數組寫法）...mapGetters(['bigSum']) },

（代碼在P116）

- P113 - mapActions與mapMutations

老師總結：

四個map方法的使用（后兩個）：

????????3.mapActions方法：用于幫助我們生成與actions對話的方法，即：包含$store.dispatch(xxx)的函數。

methods：{ // 借助mapActions生成對應的方法，方法中會調用commit去練習mutations（對象寫法）...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),// 借助mapActions生成對應的方法，方法中會調用commit去練習mutations（數組寫法）...mapActions(['jiaOdd','jiaWait']), }

????????4.mapMutations方法：用于幫助我們生成與mutations對話的方法，即：包含$store.commit(xxx)的函數。

methods：{ // 借助mapMutations生成對應的方法，方法中會調用commit去練習mutations（對象寫法）...mapMutations({increment:'JIA',decrement:'JIAN'}),// 借助mapMutations生成對應的方法，方法中會調用commit去練習mutations（數組寫法）...mapMutations(['JIA','JIAN']), }

備注：mapActions與mapMutations使用時，若需要傳遞參數，需要：在模板中綁定事件時傳遞好參數，否則參數是事件對象。

（代碼在P116）

- P114 - 多組件共享數據

無

（代碼在P116）

- P115 - vuex模塊化+namespace_1

無

（代碼在P116）

- P116 - vuex模塊化+namespace_2

課堂筆記：

（1）老師的小語錄鏈接：

https://api.uixsj.cn/hitokoto/get?type=social

老師總結：

模塊化+命名空間

????????1.目的：讓代碼更好維護，讓多種數據分析更加明確。

????????2.修改store.js

const countAbout = {namespaced:true,//開啟命名空間state:{x:1},mutations:{......},actions:{......},getters:{bigSum(state){return state.sum*10}} }const personAbout = {namespaced:true,//開啟命名空間state:{......},mutations:{......},actions:{......} }const store = new Vuex.Store({modules:{countAbout,personAbout}})

????????3.開啟命名空間后，組件中讀取state數據：

//方式一：自己直接讀取 this.$store.state.personAbout.list //方式二：借助mapState讀取 ...mapState('countAbout',['sum','school','subject']),

????????4.開啟命名空間后，組件中讀取getters數據：

//方式一：自己直接讀取 this.$store.getters['personAbout/firstPersonName'] //方式二：借助mapGetters讀取 ...mapGetters('countAbout',['bigSum'])

????????5.開啟命名空間后，組件中調用dispatch：

//方式一：自己直接讀取 this.$store.dispatch('personAbout/addPersonWang',personObj) //方式二：借助mapGetters讀取 ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),

????????6.開啟命名空間后，組件中調用commit：

//方式一：自己直接讀取 this.$store.commit('personAbout/ADD_PERSON',personObj) //方式二：借助mapGetters讀取 ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

本節部分代碼（求和案例_vuex升級版）：

store/index.js頁面：

// 該文件用于創建Vuex中最為核心的store // 引入Vue import Vue from 'vue' // 引入Vuex import Vuex from 'vuex' import countOptions from './count' import personOptions from './person' // 應用Vuex插件 Vue.use(Vuex)// 創建并暴露store export default new Vuex.Store({modules:{countAbout:countOptions,personAbout:personOptions}})

store/count.js頁面:

// 求和相關的配置 export default {namespaced:true,actions:{jiaOdd(context,value){if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){setTimeout(() =>{context.commit('JIA',value)},500)},},mutations:{JIA(state,value){// console.log('mutations中的JIA被調用了',state,value)state.sum += value},JIAN(state,value){// console.log('mutations中的JIAN被調用了',state,value)state.sum -= value},},state:{sum:0, //當前的和school:'尚硅谷',subject:'前端',},getters:{bigSum(state){return state.sum*10}}, }

store/person.js頁面：

import axios from "axios" import { nanoid } from "nanoid"// 人員管理相關的配置 export default {namespaced:true,actions:{addPersonWang(context,value){if(value.name.indexOf('王') === 0){context.commit('ADD_PERSON',value)}else{alert('添加的人必須姓王')}},addPersonServer(context){axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(response => {context.commit('ADD_PERSON',{id:nanoid(),name:response.data})},error => {alert(error.message)}) }},mutations:{ADD_PERSON(state,value){state.personList.unshift(value)}},state:{personList:[{id:'001',name:'張三'}]},getters:{firstPersonName(state){return state.personList[0].name}}, }

Count.vue頁面：

<template><div><h1>當前求和為：{{sum}}</h1><h3>當前求和放大10倍為：{{bigSum}}</h3><h3>我在{{school}},學習{{subject}}</h3><h3 style="color:red;">Person組件的總人數是：{{personList.length}}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">當前求和為奇數再加</button><button @click="incrementWait(n)">等一等再加</button></div> </template><script> import {mapGetters, mapState,mapActions,mapMutations} from 'vuex' export default {name:'Count',data() {return {n:1, //用戶選擇的數字}},computed:{// 借助mapState生成計算屬性，從state中讀取數據。（數組寫法）...mapState('countAbout',['sum','school','subject']),...mapState('personAbout',['personList']),// 借助mapGetters生成計算屬性，從getters中讀取數據。（數組寫法）...mapGetters('countAbout',['bigSum'])},methods: {// 借助mapMutations生成對應的方法，方法中會調用commit去練習mutations（對象寫法）...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),// 借助mapActions生成對應的方法，方法中會調用commit去練習mutations（對象寫法）...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),} } </script><style scoped> button{margin-left: 5px; }</style>

Person.vue頁面：

<template><div><h1>人員列表</h1><h3 style="color:red;">Count組件求和為:{{sum}}</h3><h3>列表中第一個人的名字是：{{firstPersonName}}</h3><input type="text" placeholder="請輸入名字" v-model="name"/><button @click="add">添加</button><button @click="addWang">添加一個姓王的人</button><button @click="addPersonServer">添加一個人，名字隨機</button><ul><li v-for="p in personList" :key="p.id">{{p.name}}</li></ul></div> </template><script> import {nanoid} from 'nanoid' export default {name:'Person',data() {return {name:''}},computed:{personList(){return this.$store.state.personAbout.personList},sum(){return this.$store.state.countAbout.sum},firstPersonName(){return this.$store.getters['personAbout/firstPersonName']}},methods: {add(){const personObj = {id:nanoid(),name:this.name}this.$store.commit('personAbout/ADD_PERSON',personObj)// console.log(personObj)this.name = ''},addWang(){const personObj = {id:nanoid(),name:this.name}this.$store.dispatch('personAbout/addPersonWang',personObj)this.name = ''},addPersonServer(){this.$store.dispatch('personAbout/addPersonServer')}}, } </script><style></style>

- P117 - 路由的簡介

課堂筆記：

（1）老師課件截圖：

老師總結：

1.vue-router的理解：

????????vue的一個插件庫，專門用來實現SPA應用。

2.對SPA應用的理解：

????????（1）單頁Web應用（single page web application, SPA）。

????????（2）整個應用只有一個完整的頁面。

????????（3）點擊頁面中的導航鏈接不會刷新頁面，只會做頁面的局部更新。

????????（4）數據需要通過 ajax 請求獲取。

3.路由的理解：

????????（1）什么是路由？

????????????????① 一個路由就是一組映射關系（key - value）

????????????????② key 為路徑, value 可能是 function 或 componen

????????（2）路由分類

????????????????① 后端路由：

????????????????????????1）理解：value 是 function, 用于處理客戶端提交的請求。

????????????????????????2）工作過程：服務器接收到一個請求時, 根據請求路徑找到匹配的函數來處理請求, 返回響應數據。

????????????????② 前端路由：

????????????????????????1）理解：value 是 component，用于展示頁面內容。

????????????????????????2）工作過程：當瀏覽器的路徑改變時, 對應的組件就會顯示。

（important！從這節開始，路由系列一般不貼代碼，老師的筆記里做法部分的代碼寫的很全，再貼代碼就有點冗余了）

- P118 - 路由基本使用

課堂筆記：

（1）Vuex安裝指令：npm i vue-router@3

????????（如果直接npm i vue-router，那么安裝的是vue-router4，只能在Vue3中使用）

（2）router-link標簽最終轉換到頁面上就是a標簽。

老師總結：

路由

????????理解：一個路由（route）就是一組映射關系（key - value），多個路由需要路由器（router）進行管理。

????????前端路由：key是路徑，value是組件。

1.基本使用：

????????（1）安裝vue-router，命令：npm i vue-router

????????（2）應用插件：Vue.use(VueRouter)

????????（3）編寫router配置項：

// 引入VueRouter import VueRouter from "vue-router"; // 引入路由組件 import About from '../components/About' import Home from '../components/Home'// 創建router實例對象，去管理一組一組的路由規則 const router = new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}] }) // 暴露router expot default router

????????（4）實現切換（active-class可配置高亮樣式）

<router-link active-class="active" to="/about">About</router-link>

????????（5）指定展示位置

<router-view></router-view>

- P119 - 幾個注意點

老師總結：

2.幾個注意點

????????（1）路由組件通常存放在pages文件夾，一般組件通常存放在components文件夾。

????????（2）通過切換，“隱藏”了的路由組件，默認是被銷毀掉的，需要的時候再去掛載。

????????（3）每個組件都有自己的$route屬性，里面存儲著自己的路由信息。

????????（4）整個應用中只有一個router，可以通過組件的$router屬性獲取到。

- P120 - 嵌套路由

老師總結：

3.多級路由

????????（1）配置路由規則，使用children配置項：

routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[ //通過children配置子級路由{path:'news', //此處一定不要寫‘/news’component:News,},{path:'message', //此處一定不要寫‘/message’component:Message,}]} ]

????????（2）跳轉（要寫完整路徑）：

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

P121-130：

- P121 - 路由的query參數

課堂筆記：

（老師寫了，但是視頻沒放出來，也沒找到這個課件，所以我自己總結了一下）

路由的query參數

? ? ? ? （1）作用：跳轉的時候傳遞參數

? ? ? ? （2）如何使用：

????????????????①跳轉路由并攜帶query參數，有兩種寫法：

<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> <router-link :to="{path:'/home/message/detail',query:{id:m.id,title:m.title} }">{{m.title}} </router-link>

????????????????②用$route.query接收參數：

<li>消息編號：{{$route.query.id}}</li> <li>消息標題：{{$route.query.title}}</li>

- P122 - 命名路由

老師總結：

5.命名路由

????????（1）作用：可以簡化路由的跳轉。

????????（2）如何使用：

????????????????①給路由命名：

{path:'/demo',component:Demo,children:[{path:'test',component:Test,children:[{name:'hello',path:'detail',component:Detail,}]}] }

????????????????②簡化跳轉：

<router-link to="demo/test/welcome">跳轉</router-link> <router-link :to="{name:'hello'}">跳轉</router-link> <router-link :to="{name:'hello'，query:{id:666,title:'你好' }}" >跳轉</router-link>

- P123 - 路由的params參數

老師總結：

6.路由的params參數

????????（1）配置路由，聲明接收params參數

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

????????（2）傳遞參數

<router-link :to="`/home/message/detail/666/你好`">{{m.title}}</router-link> <router-link :to="{name:'xiangqing',params:{id:666,title:'你好'} }">{{m.title}} </router-link>

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

????????（3）接收參數

$route.params.id $route.params.title

- P124 - 路由的props配置

老師總結：

7.路由的props配置

????????作用：讓路由組件更方便的收到參數

{name:'xiangqing',path:'detail',component:Detail,// props的第一種寫法，值為對象，該對象中的所有key-value都會以props的形式傳給Detail組件// props:{a:1,b:'hello'}// props的第二種寫法，值為布爾值，若布爾值為真，就會把該路由組件收到的所有params參數，以props的形式傳給Detail組件// props:true// props的第三種寫法，值為函數，該函數返回的對象中每一組key-value都會通過props傳給Detail組件props({$route}){return {id:$route.query.id,title:$route.query.title}} }

- P125 - router-link的replace屬性

老師總結：

8. router-link的replace屬性

????????（1）作用：控制路由跳轉時操作瀏覽器歷史記錄的模式

????????（2）瀏覽器的歷史記錄有兩種寫入方式，分別為push和replace，push是追加歷史記錄，replace是替換當前記錄。路由跳轉時候默認為push。

????????（3）如何開啟replace模式：

<router-link replace ...... >News</router-link>

- P126 - 編程式路由導航

老師總結：

9.編程式路由導航

????????（1）作用：不借助router-link實現路由跳轉，讓路由跳轉更加靈活

????????（2）具體編碼：

//$routere的兩個API this.$router.push({name:'xiangqing',params:{id:xxx,title:xxx } })this.$router.replace({name:'xiangqing',params:{id:xxx,title:xxx } })this.$router.forward() //前進 this.$router.back() //后退 this.$router.go(3) //可前進也可后退

- P127 - 緩存路由組件

老師總結：

10.緩存路由組件

????????（1）作用：讓不展示的路由組件保持掛載，不被銷毀。

????????（2）具體編碼：

<keep-alive :include="['News','Message']"><router-view></router-view> </keep-alive> <keep-alive include="News"><router-view></router-view> </keep-alive>

- P128 - 兩個新的生命周期鉤子

課堂筆記：

（1）$nextTick（真實DOM出來之后再回調，回顧P90）和activated、deactivated是生命周期中不在圖中的剩下三個。

老師總結：

11.兩個新的生命周期鉤子

????????（1）作用：路由組件所獨有的兩個鉤子，用于捕獲路由組件的激活狀態。

????????（2）具體名字：

????????????????① activated 路由組件被激活時觸發。

????????????????② deactivated 路由組件失活時觸發。

- P129 - 全局前置_路由守衛

無（老師總結和P130整合在一起）

- P130 - 全局后置_路由守衛

課堂筆記：

（1）$route中的meta：路由元信息。

老師總結：

12.路由守衛

????????（1）作用：對路由進行權限控制

????????（2）分類：全局守衛、獨享守衛、組件內守衛

????????（3）全局守衛：

// 全局前置路由守衛——初始化時執行、每次路由切換前被調用 router.beforeEach((to,from,next) => {console.log('beforeEach',to,from)if(to.meta.isAuth){ //判斷當前路由是否需要進行權限控制if(localStorage.getItem('school')==='atguigu'){ //權限控制的具體規則next() //放行}else{alert('暫無權限查看')// next({name:'guanyu'})}}else{next() //放行} })// 全局后置路由守衛——初始化時執行、每次路由切換之后被調用 router.afterEach((to,from) => {console.log('afterEach',to,from)if(to.meta.title){document.title = to.meta.title //修改網頁的title }else{document.title = 'vue_test' }})

P131-135：

- P131 - 獨享路由守衛

老師總結：

（4）獨享守衛：

beforeEnter:(to, from, next) => {console.log('beforeEnter',to, from)if(to.meta.isAuth){ //判斷當前路由是否需要進行權限控制if(localStorage.getItem('school')==='atguigu'){next()}else{alert('學校名不對，沒有查看權限！')}}else{next()} }

- P132 - 組件內路由守衛

老師總結：

（5）組件內守衛：

// 進入守衛：通過路由規則，進入該組件時被調用 beforeRouteEnter (to, from, next){ }, // 離開守衛：通過路由規則，離開該組件時被調用 beforeRouteLeave (to, from, next){ },

- P133 - history模式與hash模式

課堂筆記：

（1）哈希值（如 http://localhost:8080/#/home/message 中的 #/home/message 就是哈希值）最大的特點就是，不會隨著http請求發送給服務器。

（2）打包指令：npm run build

????????（生成的東西需要放到服務器中部署才能用。）

（3）課中的nodeJS的express（僅了解不需要掌握），可以看這個：NodeJS之Express基礎_不起眼的皮皮蝦的博客-CSDN博客_express nodejs

（4）中間件 connect-history-api-fallback

????????安裝指令：npm i connect-history-api-fallback

????????后端引入（必須得在靜態資源前引入）調用：

const history = require('npm i connect-history-api-fallback'); ...... app.use(history())

（5）nginx也可以實現，起到中間代理作用（僅了解）。

老師總結：

13.路由器的兩種工作模式

????????（1）對于一個url來說，什么是hash值？——#及其后面的內容就是hash值。

????????（2）hash值不會包含在HTTP請求中，即：hash值不會帶給服務器。

????????（3）hash模式：

????????????????①地址中永遠帶著#號，不美觀。

????????????????②若以后將地址通過第三方手機app分享，若app校驗嚴格，則地址會被標記為不合法。

????????????????③兼容性較好。

????????（4）history模式：

????????????????①地址干凈，美觀。

????????????????②兼容性和hash模式相比略差。

????????????????③應用部署上線時需要后端人員支持，解決刷新頁面服務端404的問題。

- P134 - element-ui基本使用

課堂筆記：

（1）安裝指令：npm i element-ui -S

老師總結：

Vue UI組件庫

????????1.移動端常用 UI 組件庫

????????????????（1）Vant Vant 3 - Mobile UI Components built on Vue

????????????????（2）Cube UI cube-ui Document

????????????????（3）Mint UI Mint UI

????????2.PC 端常用 UI 組件庫

????????????????（1）Element UI Element - The world's most popular Vue UI framework

????????????????（2）IView UI iView / View Design 一套企業級 UI 組件庫和前端解決方案

本節部分代碼：

main.js頁面：

// 引入Vue import Vue from 'vue' // 引入App import App from './App.vue'// 完整引入 // 引入ElementUI組件庫 import ElementUI from 'element-ui' // 引入ElementUI全部樣式 import 'element-ui/lib/theme-chalk/index.css' // 關閉Vue的生產提示 Vue.config.productionTip = false // 應用ElementUI Vue.use(ElementUI)// 創建vm new Vue({el:'#app',render: h => h(App), })

- P135 - element-ui按需引入

課堂筆記：

（1）按需引入指令：npm install babel-plugin-component -D

（npm xxx -D 代表著安裝開發依賴。）

（2）報錯解決：

如果報 not found ’xxx' 的錯，那就在指令中輸入： npm i xxx

如果是跟老師一樣的問題，那需要在babel.config.js頁面的presets配置項中，將原先的 es2015 修改成 @babel/preset-env

~ ??? ~ Vue2.0?完結撒花?~ ??? ~

——————————————————————————————————————

——————————————原創不易，轉載請聲明——————————————

總結

以上是生活随笔為你收集整理的尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P101-135]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：机器学习数学知识第一期复习指南
下一篇： vue 源码分析(尚硅谷视频学习笔记)