diff --git "a/\350\223\235\346\240\221\345\215\216/.keep" "b/\350\223\235\346\240\221\345\215\216/.keep"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\350\223\235\346\240\221\345\215\216/0323.html" "b/\350\223\235\346\240\221\345\215\216/0323.html"
new file mode 100644
index 0000000000000000000000000000000000000000..dbe9e2e1b852a06d466461fd3451fe11bf69340d
--- /dev/null
+++ "b/\350\223\235\346\240\221\345\215\216/0323.html"
@@ -0,0 +1,63 @@
+<!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">
+    <title>0323vue</title>
+
+    <style>
+        .lis{
+            width: 300px;
+            margin: 50px;
+            float: left;
+        }
+    </style>
+
+</head>
+<body>
+    
+    
+    <div id="app">
+        
+        <div class="lis">
+            <img width="300" height="260" :src="list[0].image" alt="" srcset="">
+            <div>{{list[0].name}}</div>
+        </div>
+        <div width="300" height="260" class="lis">
+            <img :src="list[1].image" alt="" srcset="">
+            <div>{{list[1].name}}</div>
+        </div>
+        <div width="300" height="260" class="lis">
+            <img :src="list[2].image" alt="" srcset="">
+            <div>{{list[2].name}}</div>
+        </div>
+
+
+
+    </div>
+
+
+
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script>
+
+// 作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示
+        Vue.createApp({
+            data(){
+                return{
+                    list:[
+                       { id:0,data:100,price:100,name:"新鲜水果",image:"https://tse1-mm.cn.bing.net/th/id/OIP-C.WJ8I9XKR9CuFgMov1n65QgHaE8?w=304&h=203&c=7&r=0&o=5&pid=1.7"},
+                       { id:1,data:100,price:8000,name:"iphone14",image:"https://tse3-mm.cn.bing.net/th/id/OIP-C.5-JhK658fp4WF3LTn9VOBAHaEy?w=273&h=180&c=7&r=0&o=5&pid=1.7"},
+                       { id:2,data:100,price:12000,name:"五菱宏光mini",image:"https://tse2-mm.cn.bing.net/th/id/OIP-C.SJR8DPPK7fvQASUeGQMjnAHaEw?w=274&h=180&c=7&r=0&o=5&pid=1.7"}
+                    ]
+                }
+            }
+        }).mount("#app")
+    </script>
+
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git "a/\350\223\235\346\240\221\345\215\216/0324.html" "b/\350\223\235\346\240\221\345\215\216/0324.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8788e5d2edc1bd3fb7d5ceffe7627dbe802dbdf6
--- /dev/null
+++ "b/\350\223\235\346\240\221\345\215\216/0324.html"
@@ -0,0 +1,77 @@
+<!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">
+    <title>0324vue</title>
+    <style>
+        .main {
+            width: 300px;
+            margin: 50px 20px;
+        }
+    </style>
+</head>
+
+<body>
+
+
+
+    <div id="app" v-clock>
+        <div v-for="(item,index) in list" class="main">
+            <div v-if="item.data > 0">
+                <img width="300" :src="item.image" alt="" srcset="">
+                <div>{{item.name}}</div>
+                <div>库存:{{item.data}}</div>
+                <input type="text" v-model="list[index].data1">
+                <input type="button" value="购买" @click="getdata(item.id,list[index].data1)">
+            </div>
+        </div>
+
+
+
+    </div>
+
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script>
+
+        // 作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示
+        Vue.createApp({
+            data() {
+                return {
+                    list: [
+                        { id: 0, data: 100, data1: null, name: "新鲜水果", image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.WJ8I9XKR9CuFgMov1n65QgHaE8?w=304&h=203&c=7&r=0&o=5&pid=1.7" },
+                        { id: 1, data: 100, data1: null, name: "iphone14", image: "https://tse3-mm.cn.bing.net/th/id/OIP-C.5-JhK658fp4WF3LTn9VOBAHaEy?w=273&h=180&c=7&r=0&o=5&pid=1.7" },
+                        { id: 2, data: 100, data1: null, name: "五菱宏光mini", image: "https://tse2-mm.cn.bing.net/th/id/OIP-C.SJR8DPPK7fvQASUeGQMjnAHaEw?w=274&h=180&c=7&r=0&o=5&pid=1.7" }
+                    ]
+                }
+            },
+            methods: {
+                getdata(id, data) {
+                    this.list[id].data -= data
+                    // console.log(this.list[id].data);
+                    // this.list[id].data1
+                }
+            }
+
+
+
+        }).mount("#app")
+
+
+
+
+
+
+
+    </script>
+
+
+
+
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\350\223\235\346\240\221\345\215\216/0328.html" "b/\350\223\235\346\240\221\345\215\216/0328.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2ede05b1fc6fef6f95d4332b34690c904b5bca08
--- /dev/null
+++ "b/\350\223\235\346\240\221\345\215\216/0328.html"
@@ -0,0 +1,87 @@
+<!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">
+    <title>0324vue</title>
+    <style>
+        .main {
+            width: 300px;
+            margin: 50px 20px;
+            float: left;
+        }
+
+    </style>
+</head>
+
+<body>
+
+
+
+    <div id="app" v-clock>
+        <div v-for="(item,index) in list" class="main">
+            <div v-if="item.data - item.data1 > 0">
+                <img width="300" height="250" :src="item.image" alt="" srcset="">
+                <div>{{item.name}}</div>
+                <div>库存:{{item.data - list[index].data1}}</div>
+                <input type="text" v-model="list[index].data1">
+                <!-- <input type="button" value="购买" @click="getdata(item.id,list[index].data1)"> -->
+                <br/>
+                <button @click="deleteCommodity(index)">删除商品</button>
+            </div>
+        </div>
+
+
+        <button @click="addCommodity">新增商品</button>
+
+
+
+    </div>
+
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script>
+
+        Vue.createApp({
+            data() {
+                return {
+                    list: [
+                        { id: 0, data: 100, data1: null, name: "新鲜水果", image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.WJ8I9XKR9CuFgMov1n65QgHaE8?w=304&h=203&c=7&r=0&o=5&pid=1.7" },
+                        { id: 1, data: 100, data1: null, name: "iphone14", image: "https://tse3-mm.cn.bing.net/th/id/OIP-C.5-JhK658fp4WF3LTn9VOBAHaEy?w=273&h=180&c=7&r=0&o=5&pid=1.7" },
+                        { id: 2, data: 100, data1: null, name: "五菱宏光mini", image: "https://tse2-mm.cn.bing.net/th/id/OIP-C.SJR8DPPK7fvQASUeGQMjnAHaEw?w=274&h=180&c=7&r=0&o=5&pid=1.7" }
+                    ]
+                }
+            },
+            methods: {
+                // getdata(id, data) {
+                //     this.list[id].data -= data
+                // },
+                // 新增商品方法
+                addCommodity(){
+                    let  h = this.list
+                    h.push({id:h.length,data:100,data1:null,name:"Vue js设计与实现",image:"https://img10.360buyimg.com/n1/jfs/t1/93653/3/28192/26760/62599880Eee904d1a/1344c38e8df28914.jpg"})
+                    this.list = h
+                },
+                //删除商品 (有个坑要使用v-for循环中的index)
+                deleteCommodity(index){
+                    this.list.splice(index,1)
+                }
+            }
+
+
+
+        }).mount("#app")
+
+
+
+    </script>
+
+
+
+
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\350\223\235\346\240\221\345\215\216/0330.html" "b/\350\223\235\346\240\221\345\215\216/0330.html"
new file mode 100644
index 0000000000000000000000000000000000000000..db0e04658f49ef26c4cdc93290312f410ab2e548
--- /dev/null
+++ "b/\350\223\235\346\240\221\345\215\216/0330.html"
@@ -0,0 +1,170 @@
+<!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">
+    <title>计算属性-监听属性</title>
+    <!-- <script src="./vue.js"></script> -->
+    <style>
+        .list {
+            width: 520px;
+            height: 300px;
+            display: flex;
+        }
+
+        img {
+            width: 200px;
+            height: 200px;
+            margin-right: 10px;
+        }
+
+        .title {
+            width: 300px;
+            height: 80px;
+        }
+
+        .data {
+            color: seagreen;
+        }
+
+        .price {
+            width: 200px;
+            height: 50px;
+        }
+
+        input {
+            width: 200px;
+        }
+
+        #app {
+            width: 100%;
+            display: flex;
+            flex-wrap: wrap;
+        }
+
+        .color {
+            color: orange;
+        }
+    </style>
+
+
+</head>
+
+<body>
+
+    <div id="app">
+        <div class="list" v-for="item in list">
+            <img :src="item.image" alt="" srcset="">
+            <div class="list_txt">
+                <div class="title">{{item.name}}</div>
+                <div class="data">库存: {{ item.data - item.sum }}</div>
+                <div class="price">价格:<div>{{item.price}}</div>
+                </div>
+                <input type="text" v-model="item.sum">
+                <!-- <input type="text" v-model="item.sum" @input="getprice"> -->
+            </div>
+
+        </div>
+
+        <!-- <h3>待付款:<span :class="color">{{price}}元</span></h3> -->
+        <h3>待付款:<span :class="color">{{getprice}}元</span></h3>
+
+
+
+
+
+    </div>
+
+
+
+
+
+
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script>
+        Vue.createApp({
+            data() {
+                return {
+                    list: [
+                        { id: 1, name: "华硕 微星 七彩虹3070/3070Ti 8G吃鸡电竞游戏永劫无间设计专业独立LHR显卡", data: 100, sum: null, price: "2419", image: "https://img10.360buyimg.com/n1/s450x450_jfs/t1/100558/2/37712/68868/6412c1f8Fb7fd8d55/ccb24a7a4bf062b8.jpg" },
+                        { id: 2, name: "华硕 （ASUS）ATS GeForce RTX 3060-O8G-GAMING 巨齿鲨系列电竞游戏专业独立显卡", data: 100, sum: null, price: "2199", image: "https://img14.360buyimg.com/n7/jfs/t1/45788/23/22180/55416/63e4a72fF71a49ea3/441c6228c3b6d4a6.jpg" },
+                        { id: 3, name: "华硕（ASUS) RTX4070Ti显卡O12G ROG 猛禽 TUF 旗舰台式机电脑游戏独显 TUF-RTX4070Ti-12G-GAMING", data: 100, sum: null, price: "7199", image: "https://img13.360buyimg.com/n1/s450x450_jfs/t1/181002/5/5872/85396/60aca6eaEdd396e06/cfcb75d934ee1184.jpg" }
+                    ],
+                    price: 0,
+                    color: "color"
+                }
+            },
+            methods: {
+                // 另一种写法
+                // getprice() {
+                // let sum = null
+                // this.list.forEach(e => {
+                //     if(e.sum <= 100){
+                //         sum += (e.sum * e.price)
+                //         // console.log(sum);
+                //         this.price = sum
+                //     }
+                // });
+
+                // }
+                getif() {
+
+                }
+            },
+            computed: {
+                //用来计算总共需要多少钱
+                getprice() {
+                    let sum = null
+                    this.list.forEach(e => {
+                        if (e.sum <= 100) {
+                            sum += (e.sum * e.price)
+                        }
+                    });
+                    return sum
+                }
+            },
+            watch: {
+                // 对单独一个数据监听 
+                // 'list.0.sum': {
+                //     deep: true,
+                //     handler: function (nvalue, ovalue) {
+                //         if (nvalue >= 100) {
+                // confirm("真的需要这么多?")
+                // this.list[0].sum = 100
+                //         }
+                //     }
+                // },
+
+                // 对整个数组里相同属性监听
+                list: {
+                    // 启动深度监听
+                    deep: true,
+                    // newVal 新的数据  oldVal旧数据
+                    handler(newVal, oldVal) {
+                        // 这次监听的是数组所以需要循环一下
+                        for (let i = 0; i < this.list.length; i++) {
+                            // 判断用户在输入框输入是否超过 库存 100
+                            if (newVal[i].sum >= 100) {
+                                this.list[i].sum = 100
+                            }
+                        }
+                       
+                    }
+                }
+
+
+            }
+
+        }).mount("#app")
+
+
+
+    </script>
+
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\350\223\235\346\240\221\345\215\216/0331.html" "b/\350\223\235\346\240\221\345\215\216/0331.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a41d485d4680c89aa839dd439a789d3e52e249c4
--- /dev/null
+++ "b/\350\223\235\346\240\221\345\215\216/0331.html"
@@ -0,0 +1,122 @@
+<!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">
+    <title>生命周期</title>
+</head>
+
+<body>
+
+    <div id="app">
+        <div class="list">
+            <div v-for="item in user" :key="item.login" class="list-itme">
+                <img :src="item.avatar_url" alt="" srcset="">
+                <div>{{item.login}}</div>
+            </div>
+        </div>
+
+
+
+
+    </div>
+
+
+
+    <script src="../vue.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.js"></script>
+    <script>
+
+        let app = Vue.createApp({
+            data() {
+                return {
+                    user: []
+                }
+            },
+            methods: {
+                getdata() {
+                    console.log("实例处理完所有与状态相关的选项后调用");
+                },
+                getapi() {
+                    let search = "demo"
+                    axios.get(`https://api.github.com/users?q=${search}`).then(res => {
+                        this.user = res.data
+                    })
+                }
+
+            },
+            // 初始化完成之后立即调用
+            beforeCreate() {
+                console.log("初始化完成之后");
+                // console.log(this);  // 初始化，还没有this
+
+            },
+            //实例处理完所有与状态相关的选项后调用
+            created() {
+                this.getdata()
+                console.log(this);
+                // 我个人想法， 在这里获取数据
+                this.getapi()
+
+            },
+            // 组件前
+            beforeMount() {
+                console.log("组件挂载前");
+            },
+            // 组件后
+            mounted() {
+                console.log("组件挂载后");
+            },
+            //响应式状态变更而更新其 DOM 树之前调用
+            beforeUpdate() {
+                console.log("响应式状态变更而更新其 DOM 树之 前 调用");
+            },
+            //响应式状态变更而更新其 DOM 树之后调用
+            updated() {
+                console.log("响应式状态变更而更新其 DOM 树之 后 调用");
+            },
+            // 组件卸载前
+            beforeUnmount() {
+
+            },
+            //组件卸载后
+            unmounted() {
+
+            }
+        })
+        app.mount("#app")
+
+
+
+
+    </script>
+
+
+    <style lang="less">
+        img {
+            width: 300px;
+            height: 150px;
+        }
+
+        .list {
+            width: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+        }
+
+        .list-item {
+            width: 300px;
+            margin: 10px;
+        }
+    </style>
+
+
+
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\350\223\235\346\240\221\345\215\216/0403\346\250\241\346\235\277\345\274\225\347\224\250.html" "b/\350\223\235\346\240\221\345\215\216/0403\346\250\241\346\235\277\345\274\225\347\224\250.html"
new file mode 100644
index 0000000000000000000000000000000000000000..061ae6838e983bc1b1892bc764326eb178661b84
--- /dev/null
+++ "b/\350\223\235\346\240\221\345\215\216/0403\346\250\241\346\235\277\345\274\225\347\224\250.html"
@@ -0,0 +1,125 @@
+<!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">
+    <title>Document</title>
+</head>
+
+<style>
+    .color_red {
+        color: red;
+    }
+</style>
+
+<body>
+
+
+
+    <div id="app">
+
+        <table>
+            <tr>
+                <td>账号:</td>
+                <td>
+                    <input type="text" ref="user" v-model="username" @blur="getusername">
+                    <div v-show="username.length == 0" class="color_red">{{pdname}}</div>
+                </td>
+            </tr>
+            <tr>
+                <td>密码:</td>
+                <td>
+                    <input type="password" ref="pass" v-model="password" @blur="getpassword">
+                    <div v-if="password.length != 6" class="color_red">{{pdpass}}</div>
+                </td>
+            </tr>
+            <tr>
+                <td></td>
+                <td><input type="submit" value="登录" v-hhh @click="submit"></td>
+            </tr>
+        </table>
+
+
+    </div>
+
+
+
+
+
+    <script src="./vue.js"></script>
+    <script>
+
+
+
+        // 作业：结合模板引用和自定义指令，实现表单的验证和错误样式的展示（标记红色，错误信息提示）
+
+        let app = Vue.createApp({
+            data() {
+                return {
+                    username: "",
+                    password: "",
+                    pdname: "",
+                    pdpass: ""
+                }
+            },
+            methods: {
+                submit() {
+                    // console.log(this.$refs);
+                    let user = this.$refs.user
+                    let pass = this.$refs.pass
+
+                    if (user.value == '') {
+                        this.pdname = "账号不能为空"
+                    } else {
+                        this.pdname = ""
+                    }
+                    if (pass != 6) {
+                        this.pdpass = "请输入正确的密码"
+                    } else {
+                        this.pdpass = ""
+                    }
+                }
+            },
+
+
+            // 自定义指令
+            directives: {
+                hhh(el, binding, vnode, prevVnode){
+                    // console.log(binding.instance.username);
+                    let user = this.$refs.user
+                    let pass = this.$refs.pass
+
+                    if (user.value == '') {
+                        this.pdname = "账号不能为空"
+                    } else {
+                        this.pdname = ""
+                    }
+                    if (pass != 6) {
+                        this.pdpass = "请输入正确的密码"
+                    } else {
+                        this.pdpass = ""
+                    }
+                }
+            }
+
+
+        })
+
+
+
+        app.mount("#app")
+
+
+
+
+
+
+
+
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
