diff --git "a/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242\344\275\234\344\270\232/a.webp" "b/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242\344\275\234\344\270\232/a.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..367fa828248bf960c1bf163d624521373ae3b545
Binary files /dev/null and "b/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242\344\275\234\344\270\232/a.webp" differ
diff --git "a/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242\344\275\234\344\270\232/demo.css" "b/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242\344\275\234\344\270\232/demo.css"
new file mode 100644
index 0000000000000000000000000000000000000000..c9d7d57722c08f1f687ea1661a6c77342bdae8bd
--- /dev/null
+++ "b/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242\344\275\234\344\270\232/demo.css"
@@ -0,0 +1,17 @@
+
+ #main {
+      position: relative;
+      height: 400px;
+      width: 400px;
+      background-color: azure;
+      border: 2px solid bisque;
+      border-radius: 30px;
+      left: 550px;
+      top: -1000px;
+}
+#a{
+      margin-top: 60px;
+      margin-left: 30%;
+      
+      
+}
\ No newline at end of file
diff --git "a/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242\344\275\234\344\270\232/demo.html" "b/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242\344\275\234\344\270\232/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a33aa70ffdb2c2b7aec2d27468a84f14ee6d71fe
--- /dev/null
+++ "b/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242\344\275\234\344\270\232/demo.html"
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>vue登录</title>
+    <link rel="stylesheet" href="./demo.css">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+</head>
+<body>
+    <img src="./a.webp" alt="">
+    <div  id="main" v-on:click="">
+        <div id="a">
+            <form action="" method="get" v-on:submit.prevent="submit2">
+               <h3><pre>账   号：</pre></h3> <input type="text" name="name"><br>
+               <h3><pre>密   码：</pre></h3><input type="text" name="password"><br>
+               <h3><pre>确认密码：</pre></h3><input type="text" name="password" ><br><br>
+                    <input type="submit" value="登录">
+                    <button type="button"><a href="./demo2.html">注册</a></button>
+            </form>
+        </div>
+        <!-- <div class="bigger" style="width: 300px; height: 300px; background-color: aqua;" v-on:click="bigger">
+            <div class="small" v-on:click.stop="small" style="background-color: blueviolet; height: 100px; width: 100px;">小区域</div>
+        </div> -->
+        <div v-bind:class="classsname"></div>
+        <div v-bind:[nm]="classname"></div>
+        <!-- <div v-on:[method]='click'>动态方法绑定</div>   -->
+    </div>
+</body>
+<script>
+        let vue = new Vue({
+            el:'#main',
+            data:{
+                classname:"class123456",
+                param:'class',
+                nm:'id',
+                method:'click'
+            },
+            methods:{
+                click:function(){
+                    console.log("点击了");
+                },
+               
+                submit2:function(){
+                    console.log("提交了");
+                 }
+                // bigger:function(){
+                //     console.log("大区域被点击了");
+                // },
+                // small:function(even){
+                //     even.stopPropagation();
+                //     console.log("小区域被点击了");
+                // }
+            }
+        })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242\344\275\234\344\270\232/demo2.html" "b/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242\344\275\234\344\270\232/demo2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4a9827dd5b0827cb595096f9e4747788dd590cab
--- /dev/null
+++ "b/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242\344\275\234\344\270\232/demo2.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">
+    <title>vue登录</title>
+    <link rel="stylesheet" href="./demo.css">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+</head>
+<body>
+    <img src="./a.webp" alt="">
+    <div  id="main" v-on:click="">
+        <div id="a">
+            <form action="" method="get" v-on:submit.prevent="submit2">
+               <h3><pre>手机号：</pre></h3> <input type="text" name="name"><br>
+               <h3><pre>验证码：</pre></h3><input type="text" name="password"><br><br>
+                    <input type="submit" value="注册">
+            </form>
+        </div>
+        <!-- <div class="bigger" style="width: 300px; height: 300px; background-color: aqua;" v-on:click="bigger">
+            <div class="small" v-on:click.stop="small" style="background-color: blueviolet; height: 100px; width: 100px;">小区域</div>
+        </div> -->
+        <div v-bind:class="classsname"></div>
+        <div v-bind:[nm]="classname"></div>
+        <!-- <div v-on:[method]='click'>动态方法绑定</div>   -->
+    </div>
+</body>
+<script>
+        let vue = new Vue({
+            el:'#main',
+            data:{
+                classname:"class123456",
+                param:'class',
+                nm:'id',
+                method:'click'
+            },
+            methods:{
+                click:function(){
+                    console.log("点击了");
+                },
+               
+                submit2:function(){
+                    console.log("提交了");
+                 }
+                // bigger:function(){
+                //     console.log("大区域被点击了");
+                // },
+                // small:function(even){
+                //     even.stopPropagation();
+                //     console.log("小区域被点击了");
+                // }
+            }
+        })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/4.01\345\225\206\345\223\201\350\257\246\347\273\206\344\275\234\344\270\232/demo.html" "b/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/4.01\345\225\206\345\223\201\350\257\246\347\273\206\344\275\234\344\270\232/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..05a4a1086c041cc1e785109ed8058037b510905f
--- /dev/null
+++ "b/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/4.01\345\225\206\345\223\201\350\257\246\347\273\206\344\275\234\344\270\232/demo.html"
@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>商品详细</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+<body>
+    <style type="text/css">
+        html,
+        body,
+        ul,
+        li,
+        dl {
+            margin: 0;
+            padding: 0;
+        }
+
+        /* .j02 {
+            width: 906px;
+        } */
+
+        .j02 .product {
+            width: 282px;
+            height: 333px;
+            margin-right: 20px;
+            margin-bottom: 20px;
+        }
+
+        .j02 .product:nth-of-type(3n) {
+            margin-right: 0;
+        }
+
+        .j02 .product-box {
+            width: 1208px;
+            margin-right: -20px;
+        }
+
+        .j02 .iwrap img {
+            height: 210px;
+        }
+        .product {
+            position: relative;
+            float: left;
+            background: #fff;
+            line-height: 1.5;
+            overflow: visible;
+            z-index: 1;
+        }
+
+        .product:hover {
+            overflow: visible;
+            z-index: 3;
+        }
+
+        .product:hover .iwrap {
+            margin: -3px;
+            border: 4px solid #f83760;
+            -webkit-transition: border-color .2s ease-in;
+            -moz-transition: border-color .2s ease-in;
+            -ms-transition: border-color .2s ease-in;
+            -o-transition: border-color .2s ease-in;
+            transition: border-color .2s ease-in;
+        }
+
+        .iwrap {
+            display: block;
+            position: absolute;
+            background: #fff;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            border: 1px solid #ececec;
+            box-sizing: content-box;
+        }
+
+        .iwrap img {
+            width: 100%;
+            margin-bottom: 10px;
+        }
+
+        .iwrap p.line1 {
+            margin-left: 10px;
+            margin-right: 10px;
+            color: #333;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        .iwrap p.line2 {
+            margin-left: 10px;
+            margin-right: 10px;
+            margin-bottom: 13px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        .iwrap .line3 {
+            position: absolute;
+            bottom: 0;
+            background: #f8f8f8;
+            width: 100%;
+            height: 56px;
+        }
+
+        .iwrap .line3 dd {
+            display: block;
+            float: left;
+            line-height: 1;
+        }
+
+        .iwrap .line3 .c1 {
+            width: 35%;
+            font-size: 26px;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        .iwrap .rmb {
+            display: block;
+            float: left;
+            font-size: 16px;
+            padding-left: 0.5em;
+        }
+
+        .iwrap .money {
+            display: block;
+            float: left;
+        }
+
+        .iwrap .line3 .c2 {
+            min-width: 22%;
+            max-width: 28%;
+            height: 56px;
+            box-sizing: border-box;
+            overflow: hidden;
+            text-align: center;
+        }
+
+        .iwrap .triangle {
+            display: block;
+            float: left;
+            width: 0;
+            height: 0;
+            box-sizing: border-box;
+            border-width: 28px 14px 28px 14px;
+            border-style: solid;
+            border-color: #f8f8f8 #f73760 #f8f8f8 #f8f8f8;
+        }
+
+        .iwrap .line3 .c3 {
+            width: 40%;
+            height: 56px;
+            background: #f73760;
+            color: #fff;
+            line-height: 56px;
+            text-align: center;
+            float: right;
+            cursor: pointer;
+        }
+
+        .dialogBox {
+            position: absolute;
+            margin: 0 auto;
+            margin-top: 60px;
+            text-align: center;
+            border: 1px solid #d2d2d2;
+            z-index: 999;
+          
+        }
+        .dialogDiv{
+            display: none;
+        }
+    </style>
+    <div id="main">
+            <div id="list">
+                <div class="j02 main clearfix" v-for="(val,index) in result.data.list">
+                    <div class="product">
+                        <div target="_balnk" class="iwrap">
+                            <img src="" alt="">                  
+                        </div>
+                    </div>
+                </div>
+            </div>
+    </div>
+</body>
+<script>
+    let list = [];
+    for(let i=0;i<20;i++){
+        let obj={};
+        obj.name = '路虎discover'+(i+1);
+        obj.img_url='https://www.baidu.com/link?url=Ryn98QFJv-QXmFs_AOi3_4qUuQk5uQkcVVz55dpdIAM4MD1SHLFqnEJiXidJPV84fVwJ2ec6MZk8mvT56Ght5wcA0RA7PtSMwFgb4FgEThjmsWBHxp5qJUovv-xBCkHZPLZdOwcgexoIkMrpjo2lFe_OSlZD4lZgoF7jpx2lSXmqYKskvrVozKXUPxllV6RBwe5F_H-hSJgZFU6TqNAkJaxIHQHQfmwCvSHAYpVQb0qJmrarNdBRIXqLmdB8WmnkT_9RDMtizbGzQmpQvP5ugsKvSnRIeP-0kHMJ_fIia93Lv6aR1S8r1f43iSjLxadLzW_O1IwuMhCC6aVPsG6jAduHMFFDaDerT8VMipQVtBICBH2x9fFXwQ-Sx1Z3lr134v2g2gD0suFSYLgUkNlQmQH2PHKIFGGHUrgjlol0qL_7iNsLW_a2sdY8DffPv0QnNd9hmionn1KnFGwObVzGDWKb9AwUz6nF4Gchxzi_LUNasJAkTh6EXfghEKcSHNRLlzzbx9X3mBrqDJn4YCqOXjdPeoIyBtdRq3I8mihe7_5EDG4uMaWiOFuLahFyP86H5c-enSr2msoNcuBiFrGNjhuTUs4jc9tSTKJ3_5V_wo3VdAf6CQaVQPn5zAQhYZEiqrSXOdEgds-fSBDspb9qRRgyCtnU3KYotbsNoL_--qAAH0HP25DUTS0bxjKuBRQhntDsEaxhYzoirGxjqGvcFq&wd=&eqid=9fbdcddf0000562500000005624c00e4';
+        onj.brief = obj.name+": 引进了国际散热器先进技术及科研生产装备，具备年产散热器50万";
+        obj.data='2001-12-30';
+        obj.stock="2000";
+        obj.price=i;
+        list.push(obj);
+    }
+    var obj={
+        code:200,
+        data:{
+            page:1,
+            pageSize:20,
+            'list':list,
+        },
+        msg:'请求成功',
+    }
+    let vue = new Vue({
+        el:'#main',
+        data:{
+            result:obj,
+            name:'',
+            price:'',
+            brief:'',
+            img_url:'',
+        },
+        methods:{
+            showDetail:function(i){
+                let obj = this.result.data.list[i];
+                for(let key in obj ){
+                    this[key]=obj[key];
+                }   
+                document.getElementById("dialogDiv").style.display="block";
+                document.getElementById("list").style.opacity="0.2";
+                document.getElementById("dialogDiv").style.opacity="1";
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/4.01\345\225\206\345\223\201\350\257\246\347\273\206\344\275\234\344\270\232/\347\255\224\346\241\210.html" "b/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/4.01\345\225\206\345\223\201\350\257\246\347\273\206\344\275\234\344\270\232/\347\255\224\346\241\210.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7e2b194e1230fecf2f0be98f3532cba4edbb9c16
--- /dev/null
+++ "b/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/4.01\345\225\206\345\223\201\350\257\246\347\273\206\344\275\234\344\270\232/\347\255\224\346\241\210.html"
@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title></title>
+    <meta charset="utf-8">
+    <meta http-equiv="Pragma" content="no-cache">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+
+</head>
+
+<body>
+    <style type="text/css">
+        html,
+        body,
+        ul,
+        li,
+        dl {
+            margin: 0;
+            padding: 0;
+        }
+
+        /* .j02 {
+            width: 906px;
+        } */
+
+        .j02 .product {
+            width: 282px;
+            height: 333px;
+            margin-right: 20px;
+            margin-bottom: 20px;
+        }
+
+        .j02 .product:nth-of-type(3n) {
+            margin-right: 0;
+        }
+
+        .j02 .product-box {
+            width: 1208px;
+            margin-right: -20px;
+        }
+
+        .j02 .iwrap img {
+            height: 210px;
+        }
+
+        /* ******** 商品展示:图片列表 start  *********** */
+        /* 使用说明： 要在具体页面加下列css 
+.j02 .product{width:282px;height:333px;margin-right:20px;margin-bottom:20px;}//图片是280x210
+.j02 .product-box{width:1208px;margin-right:-20px;}//宽度是4个（容器+margin-right）的宽度之和
+.j02 .iwrap img{height:210px;}    //限图片高度(此行可不写)    */
+        .product {
+            position: relative;
+            float: left;
+            background: #fff;
+            line-height: 1.5;
+            overflow: visible;
+            z-index: 1;
+        }
+
+        .product:hover {
+            overflow: visible;
+            z-index: 3;
+        }
+
+        .product:hover .iwrap {
+            margin: -3px;
+            border: 4px solid #f83760;
+            -webkit-transition: border-color .2s ease-in;
+            -moz-transition: border-color .2s ease-in;
+            -ms-transition: border-color .2s ease-in;
+            -o-transition: border-color .2s ease-in;
+            transition: border-color .2s ease-in;
+        }
+
+        .iwrap {
+            display: block;
+            position: absolute;
+            background: #fff;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            border: 1px solid #ececec;
+            box-sizing: content-box;
+        }
+
+        .iwrap img {
+            width: 100%;
+            margin-bottom: 10px;
+        }
+
+        .iwrap p.line1 {
+            margin-left: 10px;
+            margin-right: 10px;
+            color: #333;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        .iwrap p.line2 {
+            margin-left: 10px;
+            margin-right: 10px;
+            margin-bottom: 13px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        .iwrap .line3 {
+            position: absolute;
+            bottom: 0;
+            background: #f8f8f8;
+            width: 100%;
+            height: 56px;
+        }
+
+        .iwrap .line3 dd {
+            display: block;
+            float: left;
+            line-height: 1;
+        }
+
+        .iwrap .line3 .c1 {
+            width: 35%;
+            font-size: 26px;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        .iwrap .rmb {
+            display: block;
+            float: left;
+            font-size: 16px;
+            padding-left: 0.5em;
+        }
+
+        .iwrap .money {
+            display: block;
+            float: left;
+        }
+
+        .iwrap .line3 .c2 {
+            min-width: 22%;
+            max-width: 28%;
+            height: 56px;
+            box-sizing: border-box;
+            overflow: hidden;
+            text-align: center;
+        }
+
+        .iwrap .triangle {
+            display: block;
+            float: left;
+            width: 0;
+            height: 0;
+            box-sizing: border-box;
+            border-width: 28px 14px 28px 14px;
+            border-style: solid;
+            border-color: #f8f8f8 #f73760 #f8f8f8 #f8f8f8;
+        }
+
+        .iwrap .line3 .c3 {
+            width: 40%;
+            height: 56px;
+            background: #f73760;
+            color: #fff;
+            line-height: 56px;
+            text-align: center;
+            float: right;
+            cursor: pointer;
+        }
+
+        /* ******** 商品展示:图片列表 end  *********** */
+        /**弹框**/
+        .dialogBox {
+            position: absolute;
+            margin: 0 auto;
+            margin-top: 60px;
+            text-align: center;
+            border: 1px solid #d2d2d2;
+            z-index: 999;
+          
+        }
+        .dialogDiv{
+            display: none;
+        }
+    </style>
+    <div id="main">
+        <div id="list">
+            <div class="j02 main clearfix" v-for="(val,index) in result.data.list">
+                <div class="product">
+                    <div target="_blank" class="iwrap">
+                        <!-- <img src="{{val.img_url}}"> 不能这么书写，会无法解析的 -->
+                        <img :src="val.img_url">
+                        <p class="f16 line1">{{val.name}}</p>
+                        <p class="f12 line2 red"></p>
+                        <dl class="line3">
+                            <dd class="c2 red"><span class="rmb">￥{{val.price}}万</span></dd>
+                            <dd class="c3 f16" @click="showDetail(index)"><i class="triangle"></i>详情</dd>
+                        </dl>
+                    </div>
+                </div>           
+            </div>
+        </div>
+        <div class="dialogDiv" id="dialogDiv">
+            <div class="dialogBox">
+                <div class="header">
+                    <h3>商品详情</h3>
+                </div>
+                <div class="content">
+                    <div>{{name}}</div>
+                    <div>价格:{{price}}</div>
+                    <div>{{brief}}</div>
+                    <div>{{brief}}</div>
+                    <div>{{brief}}</div>
+                    <img :scr="img_url" >
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+
+</body>
+<script>
+
+    
+    let list = [];
+    for (let i = 0; i < 20; i++) {
+        let obj = {};
+        obj.name = '路虎discover' + (i + 1);
+        obj.img_url = 'https://youjia-image.cdn.bcebos.com/modelImage/3e7fc7749996492ca2cc392bab734a21/1628501201288910972d.JPG';
+        obj.brief = obj.name + ': 引进了国际散热器先进技术及科研生产装备，具备年产散热器50万';
+        obj.date = '2022-4-3';
+        obj.stock = 200;
+        obj.price = i;
+        list.push(obj);
+    }
+   //数据真实的场景是后端人员给的，一般都给json数据
+    var obj = {
+        code: 200,//状态码，为什么要给状态码，请求的话可能成功，可是失败，还可以不符合规范
+        data: {
+            page: 1,
+            pageSize: 20,
+            'list': list
+        },
+        msg:'请求成功',
+    }
+    let vue = new Vue({
+        el: '#main',
+        data: {
+            result: obj,
+            name: '',
+            price: '',
+            brief: '',
+            img_url: '',
+        },
+        methods: {
+            showDetail: function (i) {
+                let obj = this.result.data.list[i];
+                //obj 就是 list 中的一条数据
+                for (let key in obj) {//key就是obj中的属性名
+                    //key是变量
+                    this[key] = obj[key];//为什么写个[]
+                }
+                document.getElementById("dialogDiv").style.display = "block";
+                document.getElementById("list").style.opacity = "0.2";
+                document.getElementById("dialogDiv").style.opacity = "1";
+            }
+        }
+    });
+
+
+
+</script>
+
+</html>
\ No newline at end of file
