diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0412-\347\273\204\344\273\266/demo.html" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0412-\347\273\204\344\273\266/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..e4b1bca7e050d906caa99fabbe13bf154f4cf2fe
--- /dev/null
+++ "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0412-\347\273\204\344\273\266/demo.html"
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+
+<body>
+    <!-- 自定义组件，隐藏显示div -->
+    <div id='app'>
+        <button-counter></button-counter>
+    </div>
+</body>
+<script>
+    Vue.component('button-counter', {
+        data: function () {
+            return {
+                css:{
+                    'height':'400px',
+                    'width':"400px",
+                    "background-color":"pink",
+                },
+                dis:false
+            }
+        },
+        methods:{
+            cli(){
+                if(this.dis){
+                    this.dis = false
+                }else{
+                    this.dis = true
+                }
+            }
+        },
+        
+        // template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
+        template: '<div><input type="submit" value="提交" @click="cli"><div :style="css" v-if="dis"></div></div>'
+    })
+    new Vue({
+        el:'#app',
+        
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/1.html" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..fda8a0a6bad4ec404ff8f385b3c686818a4783fb
--- /dev/null
+++ "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/1.html"
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>1</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
+    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
+    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
+</head>
+
+<style type="text/css">
+    body {
+        margin: 0;
+        padding: 0;
+    }
+
+    li {
+        list-style-type: none;
+        margin: auto;
+        border-bottom: 1px dashed #000;
+        height: auto;
+        width: auto;
+        padding: 10px;
+
+    }
+
+    .lb {
+        margin: auto;
+        border: 3px solid green;
+        padding: 20px;
+        width: 50%;
+    }
+
+    img {
+        height: 100px;
+        width: 100px;
+
+
+    }
+
+    .name {
+        display: block;
+        margin-top: 10px;
+        cursor: pointer;
+    }
+
+    .badge {
+        font-size: 12px;
+        background: #ff6670;
+        color: white !important;
+        padding: 5px 5px;
+        border-radius: 5px;
+        width: 22px;
+        height: 22px;
+        margin-right: 5px;
+    }
+
+    .fd {
+        height: 200px;
+        width: 200px;
+    }
+</style>
+
+<body>
+
+    <div class="lb">
+
+        <language v-for="(item,index) in arr" :arr="item" :index="index"></language>
+
+    </div>
+</body>
+
+<script type="text/javascript">
+    let language = {
+        data: function () {
+            return {
+                show: false,
+            }
+        },
+        props: ['arr', 'index'], //数组，对外暴露一个变量名
+
+        template: '<li> <img :src="arr.img" ><span v-on:click="show=!show" class="name">{{arr.name}}</span><span class="badge" title="热销商品">热</span><span class="badge" style="background-color: #67C23A;" title="保证">保</span><span class="badge" style="background-color: #409EFF;"title="自营">商</span>  <div v-if="show" id="myAlert" class="alert alert-success "><img class="fd" :src="arr.img2" ><br><h4 style="color: #16181B;">{{arr.name}}<br>{{arr.msg}}</h4></div> </li>',
+    }
+
+    let app = new Vue({
+        el: ".lb",
+        data: {
+            arr: [{
+                "name": "Apple iPhone 13 (A2634) 128GB 星光色 支持全网通 5G双卡双待 ios 蓝色 256GB",
+                "img": "https://gd2.alicdn.com/imgextra/i2/2534651412/O1CN01LNnGRD1MIjwtVxzf4_!!2534651412.png",
+                "msg": "每个ID、相似地址、名字仅限购一台，多次购买有权取消订单，敬请理解。",
+                "img2": "https://gd1.alicdn.com/imgextra/i1/2534651412/O1CN01OGqivg1MIjx30eQWU_!!2534651412.png",
+
+            },
+
+            {
+                "name": "Apple iPhone 13 (A2634) 128GB 星光色 支持全网通 5G双卡双待 ios 蓝色 256GB",
+                "img": "https://gd2.alicdn.com/imgextra/i2/2534651412/O1CN01LNnGRD1MIjwtVxzf4_!!2534651412.png",
+                "msg": "每个ID、相似地址、名字仅限购一台，多次购买有权取消订单，敬请理解。",
+                "img2": "https://gd1.alicdn.com/imgextra/i1/2534651412/O1CN01OGqivg1MIjx30eQWU_!!2534651412.png",
+            },
+            {
+                "name": "Apple iPhone 13 (A2634) 128GB 星光色 支持全网通 5G双卡双待 ios 蓝色 256GB",
+                "img": "https://gd2.alicdn.com/imgextra/i2/2534651412/O1CN01LNnGRD1MIjwtVxzf4_!!2534651412.png",
+                "msg": "每个ID、相似地址、名字仅限购一台，多次购买有权取消订单，敬请理解。",
+                "img2": "https://gd1.alicdn.com/imgextra/i1/2534651412/O1CN01OGqivg1MIjx30eQWU_!!2534651412.png",
+            },
+            {
+                "name": "Apple iPhone 13 (A2634) 128GB 星光色 支持全网通 5G双卡双待 ios 蓝色 256GB",
+                "img": "https://gd2.alicdn.com/imgextra/i2/2534651412/O1CN01LNnGRD1MIjwtVxzf4_!!2534651412.png",
+                "msg": "每个ID、相似地址、名字仅限购一台，多次购买有权取消订单，敬请理解。",
+                "img2": "https://gd1.alicdn.com/imgextra/i1/2534651412/O1CN01OGqivg1MIjx30eQWU_!!2534651412.png",
+            },
+            ],
+            showor: false
+        },
+
+
+
+        methods: {
+            add: function (index, event) {
+                let el = event.currentTarget;
+                this.name = el.innerText
+                this.msg = this.arr[index].msg
+
+                //添加json数据~
+                // let json = {
+                // 	"name": "ces",
+                // 	"img": "ces",
+                // 	"msg": "111"
+                // }
+                // this.arr.push(json)
+                // console.log(this.arr)
+
+            }
+        },
+        components: {
+            language
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/demo.html" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d8d83ec6ab92538820cc3676044d896d7ed35f5d
--- /dev/null
+++ "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/demo.html"
@@ -0,0 +1,55 @@
+<!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>Document</title>
+</head>
+<style>
+    li{
+        border: 5px solid rgb(167, 164, 164);
+        width: 600px;
+        list-style: none;
+        display: flex;
+        margin: 5% 28%;
+        justify-content: space-evenly;
+        align-items: center;
+    }
+    img{
+        width: 280px;
+        padding:  20px 10px;
+        margin-right: 20px;
+        border-radius: 6%;
+    }
+    h1{
+        text-align: center;
+    }
+</style>
+<body>
+    <!-- 作业定义一个局部组件，实现商品遍历，数据在普通实例中 -->
+    <h1>肖战影视推荐</h1>
+    <div id="app">
+        <goods v-for="arr in arrs" :arr="arr" ></goods>
+    </div>
+</body>
+<script>
+    let goods = {
+        props:['arr'],
+        template:'<li> <img :src="arr.img">电视剧： {{arr.name}}  <br> 演员：{{arr.actor}}  <br> 角色：{{arr.role}} </li>'
+    }
+    new Vue({
+        el:'#app',
+        data:{
+            arrs:[
+            {name:"《陈情令》",actor:"肖战",role:'魏无羡',img:'img/1.webp'},
+            {name:"《余生请多指教》",actor:"肖战",role:'顾魏',img:'img/2.gif'},
+            {name:"《斗罗大陆》",actor:"肖战",role:'唐三',img:'img/3.webp'},
+            {name:"《王牌部队》",actor:"肖战",role:'顾一野',img:'img/4.webp'}]
+        },
+        components:{
+            goods,
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/img/1.webp" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/img/1.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..b0f7f128181853cfd250843ae5fdc03809b53f3f
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/img/1.webp" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/img/2.gif" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/img/2.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..abd9831ac268ea9df7fcd1a989c49c701735f8d7
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/img/2.gif" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/img/3.webp" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/img/3.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..d2e16c47668bd4e655905137e4f0079a6525db04
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/img/3.webp" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/img/4.webp" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/img/4.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..d6d82b6c4197e81e8b8be9874fd3254757d57c6f
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/img/4.webp" differ
diff --git "a/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/img/5.webp" "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/img/5.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..a62227102091f95d3d925d4901f4dfdb7d965e16
Binary files /dev/null and "b/\345\274\240\346\241\202\345\234\206/Vue\344\275\234\344\270\232/2022-0413-\345\261\200\351\203\250\347\273\204\344\273\266/img/5.webp" differ
