尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P101-135]
张天禹老师 尚硅谷Vue2.0+Vue3.0全套教程视频 最全笔记+代码每节课的重点内容都有记录，比老师写的还全！P101 - P135
视频链接：尚硅谷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列表 -->
<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',
//数据在子组件自身
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参数，有两种写法：
<!-- 跳转路由并携带query参数，to的字符串写法 -->
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>
<!-- 跳转路由并携带query参数，to的对象写法 -->
<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）传递参数
<!-- 跳转路由并携带params参数，to的字符串写法 -->
<router-link :to="`/home/message/detail/666/你好`">{{m.title}}</router-link>
<!-- 跳转路由并携带params参数，to的对象写法 -->
<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 完 结 撒 花 ~ ✿ ❀ ~
——————————————————————————————————————
——————————————原创不易，转载请声明——————————————
前往低代码交流专区
更多推荐
9
0- 0
已为社区贡献1条内容
所有评论(0)