?視頻鏈接：尚硅谷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：當(dāng)前頁(yè)面。

P101-110：

- P101 - vue-resource

課堂筆記：

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

（2）這個(gè)庫(kù)官方已不維護(hù)，轉(zhuǎn)交的團(tuán)隊(duì)維護(hù)頻率低，僅當(dāng)了解，最好還是使用axios。

- P102 - 默認(rèn)插槽

（總結(jié)在P104）本節(jié)部分代碼：

App.vue頁(yè)面：

<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:['紅色警戒','穿越火線','勁舞團(tuán)','超級(jí)瑪麗'],films:['《教父》','《拆彈專家》','《你好，李煥英》','《尚硅谷》']}}, } </script><style> .container{display: flex;justify-content: space-around; } img{width: 100%; } video{width: 100%; } </style>

Category.vue頁(yè)面：

<template><div class="category"><h3>{{title}}分類</h3><!-- 定義一個(gè)插槽（挖個(gè)坑，等著組件的使用者進(jìn)行填充） --><slot>我是一個(gè)默認(rèn)值，當(dāng)使用者沒有傳遞具體結(jié)構(gòu)時(shí)，我會(huì)出現(xiàn)</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 - 具名插槽

（總結(jié)在P104）本節(jié)部分代碼：

App.vue頁(yè)面：

<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">單機(jī)游戲</a><a href="http://www.atguigu.com">網(wǎng)絡(luò)游戲</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">經(jīng)典</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:['紅色警戒','穿越火線','勁舞團(tuán)','超級(jí)瑪麗'],films:['《教父》','《拆彈專家》','《你好，李煥英》','《尚硅谷》']}}, } </script><style> .container,.foot{display: flex;justify-content: space-around; } img{width: 100%; } video{width: 100%; } h4{text-align: center; } </style>

Category.vue頁(yè)面：

<template><div class="category"><h3>{{title}}分類</h3><!-- 定義一個(gè)插槽（挖個(gè)坑，等著組件的使用者進(jìn)行填充） --><slot name="center">我是一個(gè)默認(rèn)值，當(dāng)使用者沒有傳遞具體結(jié)構(gòu)時(shí)，我會(huì)出現(xiàn)1</slot><slot name="footer">我是一個(gè)默認(rèn)值，當(dāng)使用者沒有傳遞具體結(jié)構(gòu)時(shí)，我會(huì)出現(xiàn)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 - 作用域插槽

老師總結(jié)：

插槽：

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

????????2.分類：默認(rèn)插槽、具名插槽、作用域插槽。

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

????????????????（1）默認(rèn)插槽：

父組件中：<Category><div>html結(jié)構(gòu)1</div></Category> 子組件中：<template><div><!-- 定義插槽 --><slot>插槽默認(rèn)內(nèi)容...</slot></div></template>

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

父組件中：<Category><template slot="footer"><div>html結(jié)構(gòu)1</div></template></Category><Category><template v-slot:footer><div>html結(jié)構(gòu)2</div></template></Category> 子組件中：<template><div><!-- 定義插槽 --><slot name="center">插槽默認(rèn)內(nèi)容...</slot><slot name="footer">插槽默認(rèn)內(nèi)容...</slot></div></template>

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

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

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

父組件中：<Category><template scope="scopeData"><!-- 生成的是ul列表 --><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template></Category><Category><template scope="{games}"><!-- 生成的是ul列表 --><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',//數(shù)據(jù)在子組件自身data() {return {games:['紅色警戒','穿越火線','勁舞團(tuán)','超級(jí)瑪麗'],}},}</script>

本節(jié)部分代碼：

App.vue頁(yè)面：

<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頁(yè)面：

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

- P105 - Vuex簡(jiǎn)介

課堂筆記：

（1）老師的課件圖：

老師總結(jié)：

vuex是什么：

????????1.概念：專門在Vue中實(shí)現(xiàn)集中式狀態(tài)（數(shù)據(jù)）管理的一個(gè)Vue插件，對(duì)Vue應(yīng)用中對(duì)各組件的共享狀態(tài)進(jìn)行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信。

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

什么時(shí)候用Vuex：

????????1.多個(gè)組件依賴于同一狀態(tài)

????????2.來自不同組件的行為需要變更同一狀態(tài)

- P106 - 求和案例_純vue版

課堂筆記：

（1）關(guān)于select的option值問題：

????????為什么value前面加冒號(hào)有效？不加就是字符串。加上冒號(hào)之后，引號(hào)里的內(nèi)容都會(huì)當(dāng)成JS表達(dá)式去分析，就變成了數(shù)字。

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

本節(jié)部分代碼：

Count.vue頁(yè)面：

<template><div><h1>當(dāng)前求和為：{{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">當(dāng)前求和為奇數(shù)再加</button><button @click="incrementWait">等一等再加</button></div> </template><script> export default {name:'Count',data() {return {n:1, //用戶選擇的數(shù)字sum:0 //當(dāng)前的和}},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）圖總流程簡(jiǎn)述：

????????①State：把數(shù)據(jù)交給Vuex其實(shí)就是把數(shù)據(jù)交給Vuex中的state。這個(gè)state的本質(zhì)就是Object對(duì)象（本節(jié)的例子是{ ... sum:0 }）。

????????②Vue Components：把數(shù)據(jù)遞給Vue組件。在組件中調(diào)用API，為dispatch。

dispatch在調(diào)用的時(shí)候需要傳兩個(gè)參數(shù)，分別是動(dòng)作類型和值（如dispatch( 'jia',2 )）。

????????③Actions：本質(zhì)也是一個(gè)Object對(duì)象。

????????????????在調(diào)用了dispatch之后，Actions里面一定會(huì)有一個(gè)key，和該動(dòng)作對(duì)應(yīng)（如{ ... jia:function }）。

????????????????這個(gè)函數(shù)一旦被調(diào)用，就會(huì)收到dispatch傳的值（如2）。

????????????????在這個(gè)對(duì)應(yīng)的函數(shù)中，自己調(diào)用commit（如commit( 'jia',2 )）。提交后繼續(xù)往下走。

????????④Mutations：數(shù)據(jù)類型也是一個(gè)Object對(duì)象。

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

????????????????這個(gè)函數(shù)會(huì)拿到兩個(gè)東西，一個(gè)是整個(gè)state，還有一個(gè)是傳過來的值（如2）。只要函數(shù)中寫了“ state.sum += 2 ”，那么Mutate就會(huì)自動(dòng)執(zhí)行。

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

（3）圖其它解析：

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

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

????????②如果已經(jīng)有了數(shù)據(jù)的話，官方是允許Vue Components直接Commit給Mutations的。

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

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

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

????????Vue Components是客人，Actions是服務(wù)員，Mutations是后廚團(tuán)隊(duì)，State就是最終上的菜。

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

????????服務(wù)員收到后，將具體的單交給后廚團(tuán)隊(duì)就是commit。

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

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

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

- P108 - 搭建Vuex環(huán)境

課堂筆記：

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

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

老師總結(jié)：

搭建vuex環(huán)境

????????1.創(chuàng)建文件：src/store/index.js

// 引入Vue核心庫(kù) import Vue from 'vue' // 引入Vuex import Vuex from 'vuex' // 應(yīng)用Vuex插件 Vue.use(Vuex)// 準(zhǔn)備actions對(duì)象——用于響應(yīng)組件中的動(dòng)作 const actions = {} // 準(zhǔn)備mutations對(duì)象——用于操作數(shù)據(jù)（state） const mutations = {} // 準(zhǔn)備state對(duì)象——用于存儲(chǔ)數(shù)據(jù) const state = {}// 創(chuàng)建并暴露store export default new Vuex.Store({actions,mutations,state })

????????2.在main.js中創(chuàng)建vm時(shí)傳入store配置項(xiàng)

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

- P109 - 求和案例_vuex版

無

本節(jié)部分代碼：

store.js頁(yè)面：

// 該文件用于創(chuàng)建Vuex中最為核心的store // 引入Vue import Vue from 'vue' // 引入Vuex import Vuex from 'vuex' // 應(yīng)用Vuex插件 Vue.use(Vuex)// 準(zhǔn)備actions——用于響應(yīng)組件中的動(dòng)作 const actions = {/* jia(context,value){// console.log('actions中的jia被調(diào)用了',context,value)context.commit('JIA',value)},jian(context,value){// console.log('actions中的jian被調(diào)用了',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)}, } // 準(zhǔn)備mutations——用于操作數(shù)據(jù)（state） const mutations = {JIA(state,value){// console.log('mutations中的JIA被調(diào)用了',state,value)state.sum += value},JIAN(state,value){// console.log('mutations中的JIAN被調(diào)用了',state,value)state.sum -= value}} // 準(zhǔn)備state——用于存儲(chǔ)數(shù)據(jù) const state = {sum:0 //當(dāng)前的和 }// 創(chuàng)建并暴露store export default new Vuex.Store({actions,mutations,state })

Count.vue頁(yè)面：

<template><div><h1>當(dāng)前求和為：{{$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">當(dāng)前求和為奇數(shù)再加</button><button @click="incrementWait">等一等再加</button></div> </template><script> export default {name:'Count',data() {return {n:1, //用戶選擇的數(shù)字}},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開發(fā)者工具的使用

課堂筆記：

（1）vue控制臺(tái)切換：

老師視頻里是這樣的：

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

P111-120：

- P111 - getters配置項(xiàng)

課堂筆記：

（1）state和getters的關(guān)系就像data和computed的關(guān)系。

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

老師總結(jié)：

1.概念：當(dāng)state中的數(shù)據(jù)需要經(jīng)過加工后再使用時(shí)，可以使用getters加工。

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

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

3.組件中讀取數(shù)據(jù)：$store.getters.bigSum

- P112 - mapState和mapGetters

課堂筆記：

（1）ES6中的 ... 為擴(kuò)展運(yùn)算符，能將 [ 數(shù)組 ] 或?qū)ο筠D(zhuǎn)換為逗號(hào)分隔的參數(shù)序列。

老師總結(jié)：

四個(gè)map方法的使用（前兩個(gè)）：

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

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

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

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

（代碼在P116）

- P113 - mapActions與mapMutations

老師總結(jié)：

四個(gè)map方法的使用（后兩個(gè)）：

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

methods：{ // 借助mapActions生成對(duì)應(yīng)的方法，方法中會(huì)調(diào)用commit去練習(xí)mutations（對(duì)象寫法）...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),// 借助mapActions生成對(duì)應(yīng)的方法，方法中會(huì)調(diào)用commit去練習(xí)mutations（數(shù)組寫法）...mapActions(['jiaOdd','jiaWait']), }

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

methods：{ // 借助mapMutations生成對(duì)應(yīng)的方法，方法中會(huì)調(diào)用commit去練習(xí)mutations（對(duì)象寫法）...mapMutations({increment:'JIA',decrement:'JIAN'}),// 借助mapMutations生成對(duì)應(yīng)的方法，方法中會(huì)調(diào)用commit去練習(xí)mutations（數(shù)組寫法）...mapMutations(['JIA','JIAN']), }

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

（代碼在P116）

- P114 - 多組件共享數(shù)據(jù)

無

（代碼在P116）

- P115 - vuex模塊化+namespace_1

無

（代碼在P116）

- P116 - vuex模塊化+namespace_2

課堂筆記：

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

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

老師總結(jié)：

模塊化+命名空間

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

????????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數(shù)據(jù)：

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

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

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

????????5.開啟命名空間后，組件中調(diào)用dispatch：

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

????????6.開啟命名空間后，組件中調(diào)用commit：

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

本節(jié)部分代碼（求和案例_vuex升級(jí)版）：

store/index.js頁(yè)面：

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

store/count.js頁(yè)面:

// 求和相關(guān)的配置 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被調(diào)用了',state,value)state.sum += value},JIAN(state,value){// console.log('mutations中的JIAN被調(diào)用了',state,value)state.sum -= value},},state:{sum:0, //當(dāng)前的和school:'尚硅谷',subject:'前端',},getters:{bigSum(state){return state.sum*10}}, }

store/person.js頁(yè)面：

import axios from "axios" import { nanoid } from "nanoid"// 人員管理相關(guān)的配置 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頁(yè)面：

<template><div><h1>當(dāng)前求和為：{{sum}}</h1><h3>當(dāng)前求和放大10倍為：{{bigSum}}</h3><h3>我在{{school}},學(xué)習(xí){{subject}}</h3><h3 style="color:red;">Person組件的總?cè)藬?shù)是：{{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)">當(dāng)前求和為奇數(shù)再加</button><button @click="incrementWait(n)">等一等再加</button></div> </template><script> import {mapGetters, mapState,mapActions,mapMutations} from 'vuex' export default {name:'Count',data() {return {n:1, //用戶選擇的數(shù)字}},computed:{// 借助mapState生成計(jì)算屬性，從state中讀取數(shù)據(jù)。（數(shù)組寫法）...mapState('countAbout',['sum','school','subject']),...mapState('personAbout',['personList']),// 借助mapGetters生成計(jì)算屬性，從getters中讀取數(shù)據(jù)。（數(shù)組寫法）...mapGetters('countAbout',['bigSum'])},methods: {// 借助mapMutations生成對(duì)應(yīng)的方法，方法中會(huì)調(diào)用commit去練習(xí)mutations（對(duì)象寫法）...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),// 借助mapActions生成對(duì)應(yīng)的方法，方法中會(huì)調(diào)用commit去練習(xí)mutations（對(duì)象寫法）...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),} } </script><style scoped> button{margin-left: 5px; }</style>

Person.vue頁(yè)面：

<template><div><h1>人員列表</h1><h3 style="color:red;">Count組件求和為:{{sum}}</h3><h3>列表中第一個(gè)人的名字是：{{firstPersonName}}</h3><input type="text" placeholder="請(qǐng)輸入名字" v-model="name"/><button @click="add">添加</button><button @click="addWang">添加一個(gè)姓王的人</button><button @click="addPersonServer">添加一個(gè)人，名字隨機(jī)</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 - 路由的簡(jiǎn)介

課堂筆記：

（1）老師課件截圖：

老師總結(jié)：

1.vue-router的理解：

????????vue的一個(gè)插件庫(kù)，專門用來實(shí)現(xiàn)SPA應(yīng)用。

2.對(duì)SPA應(yīng)用的理解：

????????（1）單頁(yè)Web應(yīng)用（single page web application, SPA）。

????????（2）整個(gè)應(yīng)用只有一個(gè)完整的頁(yè)面。

????????（3） 點(diǎn)擊頁(yè)面中的導(dǎo)航鏈接不會(huì)刷新頁(yè)面，只會(huì)做頁(yè)面的局部更新。

????????（4）數(shù)據(jù)需要通過 ajax 請(qǐng)求獲取。

3.路由的理解：

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

????????????????① 一個(gè)路由就是一組映射關(guān)系（key - value）

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

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

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

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

????????????????????????2）工作過程：服務(wù)器接收到一個(gè)請(qǐng)求時(shí), 根據(jù)請(qǐng)求路徑找到匹配的函數(shù)來處理請(qǐng)求, 返回響應(yīng)數(shù)據(jù)。

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

????????????????????????1）理解：value 是 component，用于展示頁(yè)面內(nèi)容。

????????????????????????2）工作過程：當(dāng)瀏覽器的路徑改變時(shí), 對(duì)應(yīng)的組件就會(huì)顯示。

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

- P118 - 路由基本使用

課堂筆記：

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

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

（2）router-link標(biāo)簽最終轉(zhuǎn)換到頁(yè)面上就是a標(biāo)簽。

老師總結(jié)：

路由

????????理解：一個(gè)路由（route）就是一組映射關(guān)系（key - value），多個(gè)路由需要路由器（router）進(jìn)行管理。

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

1.基本使用：

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

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

????????（3）編寫router配置項(xiàng)：

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

????????（4）實(shí)現(xiàn)切換（active-class可配置高亮樣式）

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

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

<router-view></router-view>

- P119 - 幾個(gè)注意點(diǎn)

老師總結(jié)：

2.幾個(gè)注意點(diǎn)

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

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

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

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

- P120 - 嵌套路由

老師總結(jié)：

3.多級(jí)路由

????????（1）配置路由規(guī)則，使用children配置項(xiàng)：

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

????????（2）跳轉(zhuǎn)（要寫完整路徑）：

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

P121-130：

- P121 - 路由的query參數(shù)

課堂筆記：

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

路由的query參數(shù)

? ? ? ? （1）作用：跳轉(zhuǎn)的時(shí)候傳遞參數(shù)

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

????????????????①跳轉(zhuǎn)路由并攜帶query參數(shù)，有兩種寫法：

<!-- 跳轉(zhuǎn)路由并攜帶query參數(shù)，to的字符串寫法 --> <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link><!-- 跳轉(zhuǎn)路由并攜帶query參數(shù)，to的對(duì)象寫法 --> <router-link :to="{path:'/home/message/detail',query:{id:m.id,title:m.title} }">{{m.title}} </router-link>

????????????????②用$route.query接收參數(shù)：

<li>消息編號(hào)：{{$route.query.id}}</li> <li>消息標(biāo)題：{{$route.query.title}}</li>

- P122 - 命名路由

老師總結(jié)：

5.命名路由

????????（1）作用：可以簡(jiǎn)化路由的跳轉(zhuǎn)。

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

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

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

????????????????②簡(jiǎn)化跳轉(zhuǎn)：

<!-- 簡(jiǎn)化前，需要寫完整的路徑 --> <router-link to="demo/test/welcome">跳轉(zhuǎn)</router-link><!-- 簡(jiǎn)化后，直接通過名字跳轉(zhuǎn) --> <router-link :to="{name:'hello'}">跳轉(zhuǎn)</router-link><!-- 簡(jiǎn)化寫法配合傳遞參數(shù) --> <router-link :to="{name:'hello'，query:{id:666,title:'你好' }}" >跳轉(zhuǎn)</router-link>

- P123 - 路由的params參數(shù)

老師總結(jié)：

6.路由的params參數(shù)

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

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

????????（2）傳遞參數(shù)

<!-- 跳轉(zhuǎn)路由并攜帶params參數(shù)，to的字符串寫法 --> <router-link :to="`/home/message/detail/666/你好`">{{m.title}}</router-link><!-- 跳轉(zhuǎn)路由并攜帶params參數(shù)，to的對(duì)象寫法 --> <router-link :to="{name:'xiangqing',params:{id:666,title:'你好'} }">{{m.title}} </router-link>

特別注意：路由攜帶params參數(shù)時(shí)，若使用to的對(duì)象寫法，則不能使用path配置項(xiàng)，必須使用name配置！

????????（3）接收參數(shù)

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

- P124 - 路由的props配置

老師總結(jié)：

7.路由的props配置

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

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

- P125 - router-link的replace屬性

老師總結(jié)：

8. router-link的replace屬性

????????（1）作用：控制路由跳轉(zhuǎn)時(shí)操作瀏覽器歷史記錄的模式

????????（2）瀏覽器的歷史記錄有兩種寫入方式，分別為push和replace，push是追加歷史記錄，replace是替換當(dāng)前記錄。路由跳轉(zhuǎn)時(shí)候默認(rèn)為push。

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

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

- P126 - 編程式路由導(dǎo)航

老師總結(jié)：

9.編程式路由導(dǎo)航

????????（1）作用：不借助router-link實(shí)現(xiàn)路由跳轉(zhuǎn)，讓路由跳轉(zhuǎn)更加靈活

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

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

- P127 - 緩存路由組件

老師總結(jié)：

10.緩存路由組件

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

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

<!-- 緩存多個(gè)路由組件 --> <keep-alive :include="['News','Message']"><router-view></router-view> </keep-alive><!-- 緩存一個(gè)路由組件 --> <keep-alive include="News"><router-view></router-view> </keep-alive>

- P128 - 兩個(gè)新的生命周期鉤子

課堂筆記：

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

老師總結(jié)：

11.兩個(gè)新的生命周期鉤子

????????（1）作用：路由組件所獨(dú)有的兩個(gè)鉤子，用于捕獲路由組件的激活狀態(tài)。

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

????????????????① activated 路由組件被激活時(shí)觸發(fā)。

????????????????② deactivated 路由組件失活時(shí)觸發(fā)。

- P129 - 全局前置_路由守衛(wèi)

無（老師總結(jié)和P130整合在一起）

- P130 - 全局后置_路由守衛(wèi)

課堂筆記：

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

老師總結(jié)：

12.路由守衛(wèi)

????????（1）作用：對(duì)路由進(jìn)行權(quán)限控制

????????（2）分類：全局守衛(wèi)、獨(dú)享守衛(wèi)、組件內(nèi)守衛(wèi)

????????（3）全局守衛(wèi)：

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

P131-135：

- P131 - 獨(dú)享路由守衛(wèi)

老師總結(jié)：

（4）獨(dú)享守衛(wèi)：

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

- P132 - 組件內(nèi)路由守衛(wèi)

老師總結(jié)：

（5）組件內(nèi)守衛(wèi)：

// 進(jìn)入守衛(wèi)：通過路由規(guī)則，進(jìn)入該組件時(shí)被調(diào)用 beforeRouteEnter (to, from, next){ }, // 離開守衛(wèi)：通過路由規(guī)則，離開該組件時(shí)被調(diào)用 beforeRouteLeave (to, from, next){ },

- P133 - history模式與hash模式

課堂筆記：

（1）哈希值（如 http://localhost:8080/#/home/message 中的 #/home/message 就是哈希值）最大的特點(diǎn)就是，不會(huì)隨著http請(qǐng)求發(fā)送給服務(wù)器。

（2）打包指令：npm run build

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

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

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

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

????????后端引入（必須得在靜態(tài)資源前引入）調(diào)用：

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

（5）nginx也可以實(shí)現(xiàn)，起到中間代理作用（僅了解）。

老師總結(jié)：

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

????????（1）對(duì)于一個(gè)url來說，什么是hash值？——#及其后面的內(nèi)容就是hash值。

????????（2）hash值不會(huì)包含在HTTP請(qǐng)求中，即：hash值不會(huì)帶給服務(wù)器。

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

????????????????①地址中永遠(yuǎn)帶著#號(hào)，不美觀。

????????????????②若以后將地址通過第三方手機(jī)app分享，若app校驗(yàn)嚴(yán)格，則地址會(huì)被標(biāo)記為不合法。

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

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

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

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

????????????????③應(yīng)用部署上線時(shí)需要后端人員支持，解決刷新頁(yè)面服務(wù)端404的問題。

- P134 - element-ui基本使用

課堂筆記：

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

老師總結(jié)：

Vue UI組件庫(kù)

????????1.移動(dòng)端常用 UI 組件庫(kù)

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

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

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

????????2.PC 端常用 UI 組件庫(kù)

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

????????????????（2）IView UI iView / View Design 一套企業(yè)級(jí) UI 組件庫(kù)和前端解決方案

本節(jié)部分代碼：

main.js頁(yè)面：

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

- P135 - element-ui按需引入

課堂筆記：

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

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

（2）報(bào)錯(cuò)解決：

如果報(bào) not found ’xxx' 的錯(cuò)，那就在指令中輸入： npm i xxx

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

~ ??? ~ Vue2.0?完 結(jié) 撒 花?~ ??? ~

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

——————————————原創(chuàng)不易，轉(zhuǎn)載請(qǐng)聲明——————————————

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。