diff --git "a/\347\216\213\345\207\244\346\254\243/2022.04.14-vue\344\275\234\344\270\232/\345\265\214\345\245\227\347\273\204\344\273\266.html" "b/\347\216\213\345\207\244\346\254\243/2022.04.14-vue\344\275\234\344\270\232/\345\265\214\345\245\227\347\273\204\344\273\266.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c688fdc6f7c922dc3ecf1f7e04b28b1bbbfc6222
--- /dev/null
+++ "b/\347\216\213\345\207\244\346\254\243/2022.04.14-vue\344\275\234\344\270\232/\345\265\214\345\245\227\347\273\204\344\273\266.html"
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>嵌套组件</title>
+
+    <style>
+        .main {
+            clear: both;
+            margin-top: 20px
+        }
+
+        .catalog {
+            margin: 120px 0 0 100px;
+            width: 200px;
+            float: left;
+            text-align: center;
+
+        }
+
+        .product {
+            width: 715px;
+            height: 300px;
+            margin-top: 0px;
+            margin-left: 360px;
+            padding-bottom: 66px;
+            background-color: bisque;
+        }
+
+        li {
+            FONT-WEIGHT: 600;
+            list-style: none;
+            width: 222px;
+            margin-top: 60px;
+            text-align: center;
+            float: left;
+        }
+
+        .ctalog-item {
+            height: 50px;
+            line-height: 50px;
+            margin-bottom: 2px;
+            background-color: rgb(161, 159, 159);
+        }
+    </style>
+</head>
+
+<body>
+    <!-- 作业：写一个嵌套组件，商品目录组件嵌套商品（图片，价格，商品名 ......）组件，数据在 vm 实例中 -->
+    <div id="app">
+        <app :catalogs="catalogs" :products="products"><span>hot!</span></app>
+    </div>
+</body>
+<script>
+
+
+    let product = {
+        props: ['product'],
+        template: "<li><img :src='product.img' width='100%'>{{product.name}}{{product.price}}</li>",
+    }
+
+    let catalog = {
+        data: function () {
+            return { catid: 0 }
+        },
+        methods: {
+            catshow: function () {
+                this.show = !this.show
+            }
+        },
+        props: ['catalog'],
+        template: "<div >{{catalog.name}}</div>",
+        components: {
+
+        }
+    }
+
+
+    let app = {
+        methods: {
+            choicecat: function (i) {// 事件里直接写上 函数名即可 v-on:click="choicecat" 也可以传递参数  v-on:click="choicecat（参数）"
+                this.catid = i
+            }
+        },
+        data: function () {
+            return { catid: 1 }
+        },
+        props: ['catalogs', 'products'],
+        template: "<div class='main'>" +// 只能由一个根元素
+            "<div class='catalog' ><catalog  class='ctalog-item' v-for='catalog in catalogs' :catalog='catalog'  @click.native='choicecat(catalog.id)'></catalog></div><ul class='product'  >" +
+            "<product v-for='product in products' :product='product'  v-show='(catid==product.cid)'></product>" +
+            "</ul></div>",//组件里面要使用方法加上修饰符 .native
+        components: {
+            catalog,
+            product,
+        }
+    }
+
+    new Vue({
+        el: "#app",
+        data: {
+            catalogs: [
+                {
+                    name: '手机',
+                    id: 1,
+                    img: ''
+                },
+                {
+                    name: '电视',
+                    id: 2,
+                    img: '',
+                }
+            ],
+            products: [
+                {
+                    cid: 1,
+                    name: '黑鲨5 Pro  ',
+                    price: '4699 元',
+                    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1648539027.11133390.png'
+                },
+                {
+                    cid: 1,
+                    name: 'Redmi K50 电竞版  ',
+                    price: '3899 元',
+                    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1644895162.54098125.png'
+                },
+                {
+                    cid: 1,
+                    name: 'Xiaomi 12 Pro  ',
+                    price: '5399 元',
+                    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640680536.47346782.png'
+                },
+                {
+                    cid: 2,
+                    name: 'Redmi智能电视X65 2022款  ',
+                    price: '3399 元',
+                    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634637922.04175457.jpg'
+                },
+                {
+                    cid: 2,
+                    name: '小米电视 ES75 2022款  ',
+                    price: '5499元',
+                    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634637922.04175457.jpg'
+                },
+                {
+                    cid: 2,
+                    name: '小米电视6 至尊版 55英寸  ',
+                    price: '5499元',
+                    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634637922.04175457.jpg'
+                },
+            ],
+        },
+
+        components: {
+            app,
+        }
+    })
+
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\345\207\244\346\254\243/2022.04.15-vue\344\275\234\344\270\232/\346\217\222\346\247\275.html" "b/\347\216\213\345\207\244\346\254\243/2022.04.15-vue\344\275\234\344\270\232/\346\217\222\346\247\275.html"
new file mode 100644
index 0000000000000000000000000000000000000000..29a649fd1e8213a4e2e4f6f8394ccd6a67aa4062
--- /dev/null
+++ "b/\347\216\213\345\207\244\346\254\243/2022.04.15-vue\344\275\234\344\270\232/\346\217\222\346\247\275.html"
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>slot插槽</title>
+    <style>
+        .main {
+            clear: both;
+            margin-top: 20px
+        }
+
+        .catalog {
+            width: 300px;
+            float: left;
+            text-align: center;
+            background: grey;
+            height: 70px;
+            line-height: 70px;
+            margin-bottom: 2px;
+        }
+
+        .product {
+            padding-top: 20px;
+            width: 650px;
+            height: 222px;
+            margin-left: 360px;
+            padding-bottom: 36px;
+            background-color: bisque;
+        }
+
+        li {
+            list-style: none;
+            width: 200px;
+            height: 216px;
+            float: left;
+        }
+    </style>
+</head>
+
+
+<body>
+    <!-- 作业,es2015模块，回顾下，没学预习下, 在上一节课基础之上使用 slot插槽 为不同的目录，添加不同的背景图片-->
+    <div id="app">
+        <app :app="catalogs[0]"></app>
+        <app :app="catalogs[1]"><img 
+            src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0a1ae5341d2dae66cd42566c60d2d666.png?thumb=1&w=160&h=110&f=webp&q=90' />
+        </app>
+        <app :app="catalogs[2]"><img 
+            src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4732fb7e6c170d1438a4554bb702e7ca.png?thumb=1&w=160&h=110&f=webp&q=90 ' />
+        <img width="100px" src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628600350.1553788.png">
+        </app>
+    </div>
+
+</body>
+<script>
+    let product = {
+        props: ['product'],
+        template: "<li><img :src='product.img' width='100%'>{{product.name}}{{product.price}}</li>",
+    }
+
+    let catalog = {
+        data: function () {
+            return { show: true }
+        },
+        methods: {
+            catshow: function () {
+                this.show = !this.show
+            }
+        },
+        props: ['data'],
+
+        template: "<div><div class='catalog' @click='catshow' ><div></div>{{data.name}}</div>" +
+            "<ul class='product' v-if='show' ><product v-for='(product,index) in data.products' :product='product'></product>" +
+            "</ul></div>",
+        components: {
+            product
+        }
+    }
+
+    let app = {
+        props: ['app'],
+        //目录的模板 slot 可以理解为是变量,在 <app></app> 写html 标签即可传递
+        template: "<div class='main'><catalog :data='app'></catalog><slot><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/087c52d253d9301dff7743d6bf2d0330.png?thumb=1&w=160&h=110&f=webp&q=90' /></slot></div>",
+        components: {
+            catalog
+        }
+    }
+
+    new Vue({
+        el: "#app",
+        data: {
+            catalogs: [
+                {
+                    id: 1,
+                    name: '手机',
+                    products: [
+                        {
+                            name: '黑鲨5 Pro  ',
+                            price: '4699 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1648539027.11133390.png'
+                        },
+                        {
+
+                            name: 'Redmi K50 电竞版  ',
+                            price: '3899 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1644895162.54098125.png'
+                        },
+                        {
+                            name: 'Xiaomi 12 Pro  ',
+                            price: '5399 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640680536.47346782.png'
+                        }
+                    ]
+                },
+                {
+                    id: 2,
+                    name: '电视',
+                    products: [
+                        {
+                            name: 'Redmi智能电视X65 2022款  ',
+                            price: '3399 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634637922.04175457.jpg'
+                        },
+                        {
+                            name: '小米电视 ES75 2022款  ',
+                            price: '5499元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634637922.04175457.jpg'
+                        },
+                        {
+                            name: '小米电视6 至尊版 55英寸  ',
+                            price: '5499元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634637922.04175457.jpg'
+                        }
+                    ]
+                },
+                {
+                    id: 3,
+                    name: '笔记本 平板',
+                    products: [
+                        {
+                            name: 'Redmi Book Pro 14 2022  ',
+                            price: '5399 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1647320245.05395660.png'
+                        },
+                        {
+                            name: 'Redmi G 2021  ',
+                            price: '5499 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1631957457.33064712.jpg'
+                        },
+                        {
+                            name: '小米笔记本 Pro 15 增强版  ',
+                            price: '5999 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1629388763.38582634.png'
+                        }
+                    ]
+                }
+            ]
+        },
+        //template:'<app  :data="catalogs" />',
+        components: {
+            app,
+        }
+    })
+
+
+</script>
+
+</html>
\ No newline at end of file
