diff --git "a/\350\203\241\346\260\270\345\230\211/2021-5-25(Vue\347\232\204\344\275\277\347\224\250\345\237\272\347\241\200).md" "b/\350\203\241\346\260\270\345\230\211/2021-5-25(Vue\347\232\204\344\275\277\347\224\250\345\237\272\347\241\200).md"
new file mode 100644
index 0000000000000000000000000000000000000000..9c218d18afae9da4b7e9babb6650b1a04d689f5d
--- /dev/null
+++ "b/\350\203\241\346\260\270\345\230\211/2021-5-25(Vue\347\232\204\344\275\277\347\224\250\345\237\272\347\241\200).md"
@@ -0,0 +1,170 @@
+# Vue的使用基础
+
+~~~
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue</title>
+</head>
+<body>
+    <!-- app节点 -->
+    <div id="app">
+          <!-- msg为model模型 -->
+        {{msg}} 
+    </div>
+
+
+    
+    <!-- Vue使用的Js -->
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        var app = new Vue({ //new实例化一个Vue
+            el : "#app",    // 挂载的节点为id=app
+            data(){     // 挂载节点里的data数据(一个方法，方法里有个对象)
+               return {     // 返回的也是个对象
+                msg : "小胖呀"   // 返回对象里面的数据
+               } 
+            }
+        });
+    </script>
+</body>
+</html>
+~~~
+
+## 也可以在网页的F12调试模式下修改网页数据
+![](/img/2021-05-25_1.png)
+
+
+## Vue也可以在Html代码中写语法
+```
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue</title>
+</head>
+<body>
+    <!-- app节点 -->
+    <div id="app">
+        <span title = "xxxxx">
+            啊这
+        </span>
+
+        <!-- if语法 -->
+        <p v-if = "seen">
+            你个憨憨
+        </p>
+
+        <!-- for语法 -->
+        <ul>
+            <li v-for="td in todo">
+                {{td.text}}
+            </li>
+        </ul>
+    </div>
+
+
+
+    <!-- Vue使用的Js -->
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        var app = new Vue({ //new实例化一个Vue
+            el : "#app",    // 挂载的节点为id=app
+            data(){     // 挂载节点里的data数据(一个方法，方法里有个对象)
+               return {     // 返回的也是个对象
+
+                msg : "小胖呀",   // 返回对象里面的数据
+                
+                seen : false,     // app节点里面的seen判断如果等于false则在页面隐藏文本
+
+                todo:[    // 循环打印一个数组
+                {text : "xiaopang"},
+                {text : "小胖"},
+                {text : 1},
+                {text : "xxx"},
+                {text : "hhh"}
+                ]
+
+               }
+            }
+        });
+    </script>
+</body>
+</html>
+```
+
+## 如果想挂载多个节点则需要重新实例化Vue来挂载
+```
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue</title>
+</head>
+<body>
+    <!-- app节点 -->
+    <div id="app">
+        <span title = "xxxxx">
+            啊这
+        </span>
+
+        <!-- if语法 -->
+        <p v-if = "seen">
+            你个憨憨
+        </p>
+
+        <!-- for语法 -->
+        <ul>
+            <li v-for="td in todo" v-bind:title = "msg">
+                {{td.text}}
+            </li>
+        </ul>
+    </div>
+
+    <div id="a">
+        <span v-bind:title = "com">
+            这这这
+        </span>
+    </div>
+
+
+    <!-- Vue使用的Js -->
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        var app = new Vue({ //new实例化一个Vue
+            el : "#app",    // 挂载的节点为id=app
+            data(){     // 挂载节点里的data数据(一个方法，方法里有个对象)
+               return {     // 返回的也是个对象
+                msg : "小胖呀",   // 返回对象里面的数据
+                seen : false,     // app节点里面的seen判断如果等于false则在页面隐藏文本
+                todo:[
+                {text : "xiaopang"},  // 循环打印一个数组
+                {text : "小胖"},
+                {text : 1},
+                {text : "xxx"},
+                {text : "hhh"}
+                ]  
+               } 
+            }
+        }
+        );
+    </script>
+    
+    <script>
+    var app2 = new Vue({     //第二个实例化的Vue
+            el : "#a",
+            data(){
+                return{
+                    com : "xiaopang"
+                }
+            }
+
+        })
+    </script>
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\350\203\241\346\260\270\345\230\211/2021-5-26(Vue\345\237\272\347\241\200\344\272\214,\347\273\204\344\273\266).md" "b/\350\203\241\346\260\270\345\230\211/2021-5-26(Vue\345\237\272\347\241\200\344\272\214,\347\273\204\344\273\266).md"
new file mode 100644
index 0000000000000000000000000000000000000000..02e0bef14a488355694075c9b95aa1d0ca565067
--- /dev/null
+++ "b/\350\203\241\346\260\270\345\230\211/2021-5-26(Vue\345\237\272\347\241\200\344\272\214,\347\273\204\344\273\266).md"
@@ -0,0 +1,233 @@
+## 实时获取页面用户输入的值并打印到页面的指定位置
+```
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue</title>
+</head>
+
+<body>
+    <div id="app">
+        <form action="">
+            <table>
+                <tr>
+                    <td>用户名：</td>
+                    <td><input type="text" name="" id="" v-model="formData.username"></td>
+                </tr>
+                <tr>
+                    <td>密码：</td>
+                    <td><input type="text" name="" id="" v-model="formData.password"></td>
+                </tr>
+            </table>
+        </form>
+        <label for="">{{sty}}</label>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data() {
+                return {
+                    formData: {
+                        username:'',
+                        password:''
+                    },
+                }
+            },
+            computed: {
+                sty: function() {
+                    return `用户名：${this.formData.username},密码：${this.formData.password}`
+                }
+            }
+        })
+    </script>
+</body>
+
+
+</html>
+```
+## 循环语句(循环数组里面的值)
+```
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue</title>
+</head>
+
+<body>
+    <div id="app">
+        <ul>
+            <li v-for="tmy in test">{{tmy.ta}}</li>
+        </ul>
+
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data() {
+                return {
+                    test: [
+                        { ta: "xiaopang" },
+                        { ta: "八戒" },
+                        { ta: "小乔" },
+                        { ta: "大乔" },
+                        { ta: "猴子" },
+                    ],
+                }
+            },
+        })
+    </script>
+</body>
+</html>
+```
+# 组件化应用构建
+## 1.定义一个组件
+```
+    <script>
+        Vue.component('todo-item', {    //定义一个组件
+            template: `<li>请输入</li>`
+        })
+
+        var app = new Vue({     
+            el: "#app",
+            data() {
+                return {
+                    test: [
+                        { ta: "xiaopang" },
+                        { ta: "八戒" },
+                        { ta: "小乔" },
+                        { ta: "大乔" },
+                        { ta: "猴子" },
+                    ],
+                }
+            },
+        })
+    </script>
+```
+## 2.在body中写入组件
+```
+    <div id="app">
+        <ul>
+            <li v-for="tmy in test">{{tmy.ta}}</li>
+        </ul>
+
+        <todo-item></todo-item> //在body中写入组件
+        
+    </div>
+```
+### <todo-item></todo-item>在页面中显示的是定义组件中的template
+
+## 3.组件调用其它的数据
+```
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue</title>
+</head>
+
+<body>
+    <div id="app">
+        <ul>
+            <li v-for="tmy in test">{{tmy.ta}}</li>
+        </ul>
+
+        <!-- 循环test 并且绑定item等于"x",x来自test数组里面的元素 -->
+        <todo-item v-for="x in test" v-bind:item="x"></todo-item>   //应用组件
+
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        Vue.component('todo-item', {    //定义一个组件
+            props : ['item'],   //属性 : [来自todo-item里面绑定的item]
+            template: `<li>{{item.ta}}</li>`    //模板： `<li>{{test数组里面的ta}}</li>`
+        })
+
+        var app = new Vue({
+            el: "#app",
+            data() {
+                return {
+                    test: [
+                        { ta: "xiaopang" },
+                        { ta: "八戒" },
+                        { ta: "小乔" },
+                        { ta: "大乔" },
+                        { ta: "猴子" },
+                    ],
+                }
+            },
+        })
+    </script>
+</body>
+
+</html>
+```
+## 在应用的组件中绑定一个值，然后传回到定义的组件里应用到模板中
+
+
+## 3.1调用的数组里面有多个数据
+```
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue</title>
+</head>
+
+<body>
+    <div id="app">
+        <ul>
+            <li v-for="tmy in test">{{tmy.ta}}</li>
+        </ul>
+
+        <!-- 循环test 并且绑定item等于"x",x来自test数组里面的元素 -->
+        <todo-item v-for="x in test" v-bind:item=x></todo-item>
+
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        Vue.component('todo-item', {
+            props: ['item'],   //属性 : [来自todo-item里面绑定的item]
+            template: `
+            <li>    // 有多个数据则需要注意这种标签，否则会报错
+            {{item.id}}
+            {{item.ta}}
+            </li>`    //模板： `<li>{{test数组里面的ta}}</li>`
+        })
+
+        var app = new Vue({
+            el: "#app",
+            data() {
+                return {
+                    test: [
+                        { id: 1, ta: "xiaopang" },
+                        { id: 2, ta: "八戒" },
+                        { id: 3, ta: "小乔" },
+                        { id: 4, ta: "大乔" },
+                        { id: 5, ta: "猴子" },
+                    ],
+                }
+            },
+        })
+    </script>
+</body>
+
+</html>
+```
\ No newline at end of file
diff --git "a/\350\203\241\346\260\270\345\230\211/2021-5-28(Vue\347\232\204\345\256\236\344\276\213\345\214\226,\346\225\260\346\215\256\344\270\216\346\226\271\346\263\225,Vue\347\232\204\347\224\237\345\221\275\345\221\250\346\234\237).md" "b/\350\203\241\346\260\270\345\230\211/2021-5-28(Vue\347\232\204\345\256\236\344\276\213\345\214\226,\346\225\260\346\215\256\344\270\216\346\226\271\346\263\225,Vue\347\232\204\347\224\237\345\221\275\345\221\250\346\234\237).md"
new file mode 100644
index 0000000000000000000000000000000000000000..e5bc4a1baefdf16ea681b1a06da375f5b15fb983
--- /dev/null
+++ "b/\350\203\241\346\260\270\345\230\211/2021-5-28(Vue\347\232\204\345\256\236\344\276\213\345\214\226,\346\225\260\346\215\256\344\270\216\346\226\271\346\263\225,Vue\347\232\204\347\224\237\345\221\275\345\221\250\346\234\237).md"
@@ -0,0 +1,105 @@
+﻿# Vue实例
+```
+<script>
+          var app = new Vue({
+
+           });
+</script>
+```
+## 当一个 Vue 实例被创建时，它将 ViewData 对象中的所有的 属性 加入到 Vue 的响应式系统中,所以我们打印app.userName === ViewData.userName 会等于 true
+```
+<script>
+        var viewData = {
+            userName : "xiaopang",
+        };
+
+        var app = new Vue({
+            el:"#app",	// el : Vue的挂载属性
+            data(){	// data : Vue的数据属性
+                return viewData
+            }
+        });
+        console.log(app.userName === viewData.userName); //true
+        // console.log(app);
+    </script>
+```
+### 也就是说ViewData.userName 写属性 时 会把属性加入到实例化的Vue中，可以在app中查询到该属性
+
+## 但如果你在实例创建以后再向viewData添加属性的话，则不会同步到app中
+```
+<script>
+        var viewData = {
+            userName : "xiaopang",
+        };
+
+        var app = new Vue({
+            el:"#app",
+            data(){
+                return viewData
+            }
+        });
+
+        viewData.age = 20;
+
+        // console.log(app.userName === viewData.userName);
+        console.log(app);   // 含userName
+        console.log(viewData);  //含userName，age
+</script>
+```
+### 所以最好在实例化Vue之前就定义好，哪怕是空字符串
+
+# 想要打印或调用Vue自带的选项则要在前面加上·$·，以防与用户定义的属性弄混
+```
+        console.log(app.$data);
+        console.log(app.$el);
+```
+
+# 实例生命周期钩子
+![](./img/Vue生命周期.JPG)
+
+## 创建函数执行时无论怎么调换顺序都得按照该生命周期走
+```
+    <script>
+        var viewData = {
+            userName : "xiaopang",
+        };
+
+        var app = new Vue({
+            el:"#app",
+            data(){
+                return viewData
+            },
+            // 钩子
+            mounted:function(){
+                console.log(`模型视图挂载完后`);
+            },
+
+            created:function(){
+                console.log(`创建Vue`);
+            },
+
+            beforeCreate:function(){
+                console.log(`创建Vue之前`);
+            },
+
+            beforeMount:function(){
+                console.log(`模型视图挂载完之前`);
+            },
+
+            beforeUpdate:function(){
+                console.log(`数据更新之前`);
+                // console.log(this)    this指的是当前实例化的Vue，也可以this.$el等
+            },
+
+            updated:function(){
+                console.log(`数据更新后`);
+            }
+
+        });
+
+        console.log(app.$data);
+        console.log(viewData);
+    </script>
+```
+![](./img/Vue生命周期演示.JPG)
+## 我们可以利用该特性在创建Vue或在模型视图挂载完之前执行一些函数
diff --git "a/\350\203\241\346\260\270\345\230\211/img/Vue\347\224\237\345\221\275\345\221\250\346\234\237.JPG" "b/\350\203\241\346\260\270\345\230\211/img/Vue\347\224\237\345\221\275\345\221\250\346\234\237.JPG"
new file mode 100644
index 0000000000000000000000000000000000000000..242fb983173e66eac52dba5b90e244c00cc2eaa0
Binary files /dev/null and "b/\350\203\241\346\260\270\345\230\211/img/Vue\347\224\237\345\221\275\345\221\250\346\234\237.JPG" differ
diff --git "a/\350\203\241\346\260\270\345\230\211/img/Vue\347\224\237\345\221\275\345\221\250\346\234\237\346\274\224\347\244\272.JPG" "b/\350\203\241\346\260\270\345\230\211/img/Vue\347\224\237\345\221\275\345\221\250\346\234\237\346\274\224\347\244\272.JPG"
new file mode 100644
index 0000000000000000000000000000000000000000..d5d731824ec222061a3d470ae5b25d0faf8bcfd9
Binary files /dev/null and "b/\350\203\241\346\260\270\345\230\211/img/Vue\347\224\237\345\221\275\345\221\250\346\234\237\346\274\224\347\244\272.JPG" differ
