当前位置：首页 > 前端技术 > vue >内容正文

vue

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

发布时间：2023/12/31 vue 46 豆豆

生活随笔收集整理的这篇文章主要介绍了尚硅谷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 源码分析(尚硅谷视频学习笔记)