尚硅谷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列表 --><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: