diff --git "a/\351\231\206\344\270\207\347\201\257/IMG/05-25/1.png" "b/\351\231\206\344\270\207\347\201\257/IMG/05-25/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..951199db7b5b36928cf1d4c64f1f60b725b2e82e
Binary files /dev/null and "b/\351\231\206\344\270\207\347\201\257/IMG/05-25/1.png" differ
diff --git "a/\351\231\206\344\270\207\347\201\257/IMG/05-25/2.png" "b/\351\231\206\344\270\207\347\201\257/IMG/05-25/2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bb19a33ee89449c90b3b5c2d6f2f8a98303fbc2a
Binary files /dev/null and "b/\351\231\206\344\270\207\347\201\257/IMG/05-25/2.png" differ
diff --git "a/\351\231\206\344\270\207\347\201\257/IMG/05-26/1.png" "b/\351\231\206\344\270\207\347\201\257/IMG/05-26/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..1dbdeb9c096cb5c10c2871202f6d001ffa7b0989
Binary files /dev/null and "b/\351\231\206\344\270\207\347\201\257/IMG/05-26/1.png" differ
diff --git "a/\351\231\206\344\270\207\347\201\257/IMG/05-26/2.png" "b/\351\231\206\344\270\207\347\201\257/IMG/05-26/2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..473a1b1c06123879cfccabacbfe1d7a2b7b6c624
Binary files /dev/null and "b/\351\231\206\344\270\207\347\201\257/IMG/05-26/2.png" differ
diff --git "a/\351\231\206\344\270\207\347\201\257/note-2021-05-25.md" "b/\351\231\206\344\270\207\347\201\257/note-2021-05-25.md"
new file mode 100644
index 0000000000000000000000000000000000000000..968d5a7ccec9005d32883a0d9be807ab122da6b6
--- /dev/null
+++ "b/\351\231\206\344\270\207\347\201\257/note-2021-05-25.md"
@@ -0,0 +1,123 @@
+# vue.js
+vue是一套用于构建用户界面的渐进式框架  
++ 引入vue  
++ 开发版本 包含了有帮助的命令行警告
+`<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>`  
++ 生产版本 去掉了警告
+`<script src="https://cdn.jsdelivr.net/npm/vue"></script>`
+
+## 声明式渲染
++ 引入上面的vue
++ 记得js文件要放在最后哦
+## 文本插值
+#### 定义一个标签
+    <div id="app">
+    {{msg}}
+    </div>
+## data有三种写法
+写法一：对象    
+`　　data: {
+        msg: 'hello'
+　　}  `  
+写法二：函数    
+`　　data: function () {
+        return {
+            　msg: 'hello'
+        }
+　　}  `  
+写法三：函数的ES6写法  
+`　　data(){
+　　　　return {
+        　msg: 'hello'
+        }
+　　}`
+#### 在引入vue的后面在写一个script标签
+    var app = new Vue({
+    el: '#app',
+    data: {
+        msg: 'Hello Vue!'
+    }
+    })
++ el表示挂在到什么地方去 可以用id 也可以用class 注意一个是用#一个是用.
++ 注意data是一个对象 这里赋值的话是用:不是=  
++ 在当前页面打开JavaScript控制台 修改app.msg的值 可以看到页面中msg的值会相对应的更新
+## 绑定元素 
+#### 定义一个标签
+    <div id="app-2">
+    <span v-bind:title="msg">
+        鼠标悬停几秒钟查看此处动态绑定的提示信息！
+    </span>
+    </div>
++ 这里是用span标签 但不仅限span标签  其它标签也是能用的 比如p标签
++ v-bind:attribute(属性) v-band被称为指令指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute
++ 同样在当前页面打开JavaScript控制台 修改app2.msg的值 可以看到页面中msg的值会相对应的更新
+#### script标签内容
+    var app2 = new Vue({
+    el: '#app-2',
+    data: {
+        msg: '页面加载于 ' + new Date().toLocaleString()
+    }
+    })
++ 这里toLocaleString()方法根据本地时间把 Date 对象转换为字符串,并返回结果
++ 把鼠标停留在上面就可以显示app-2的msg内容
+#### 其实本质跟
+    <p title="333333">
+        鼠标悬停几秒钟查看此处动态绑定的提示信息！
+    </p>
+#### 效果是差不多的 但是上面那个可以进行一些更复杂的操作 比如new Date().toLocaleString() 下面的这个就不能使用JavaScript控制台修改
+## 条件与循环
+#### 定义一个标签
+    <div id="app-3">
+    <p v-if="seen">现在你看到我了</p>
+    </div>
++ 这里v-if 指令后面是=
+#### script标签内容
+    var app3 = new Vue({
+    el: '#app-3',
+    data: {
+        seen: true
+    }
+    })
+![picture](./IMG/05-25/1.png)  
+## 在JavaScript控制台输入 app3.seen=false  
+![picture](./IMG/05-25/2.png)  
+## 在JavaScript控制台继续输入 app3.seen=true  发现又回来了
+![picture](./IMG/05-25/1.png)  
++ 其实也好理解 就是条件判断 当if是true是就显示 为false时就将其从dom节点中删除 为true的时候重新插入
+# 注意v-if和v-show很像   要注意区分  在本章最后有写v-show
+#### 定义一个标签
+    <div id="app-4">
+    <ol>
+        <li v-for="todo in todos">
+        //写法一：
+        {{ todo.text }}
+        //写法二：
+        {{ todo }}
+        </li>
+    </ol>
+    </div>
+#### script标签内容
+    var app4 = new Vue({
+    el: '#app-4',
+    data: {
+        //写法一：
+        todos: [
+        { text: '这是第一条' },
+        { text: '这是第二条' },
+        { text: '这是第三条' }
+        ]
+        //写法二：
+        todos: [
+        { '这是第一条' },
+        { '这是第二条' },
+        { '这是第三条' }
+        ]
+    }
+    })
++ date属性返回的是一个对象 对象里的值可以以数组的形式保存 然后循环的时候用键来调用 数组里面可以存入键值对 也可以单纯存值  
++ 当前页面打开JavaScript控制台 输入 app4.todos.push({ text: '这是第四条' }) 或者 app4.todos.push({ '这是第四条' })可以看到最后添加了一个新项目
+
+
+## v-show
++ 跟v-if写法是一样的 但v-if是为false时将其从DOM节点中删除  为true时再插入 原来的位置已经没东西了
++ v-show是将节点隐藏 但还在 并且还占原来的位置
diff --git "a/\351\231\206\344\270\207\347\201\257/note-2021-05-26.md" "b/\351\231\206\344\270\207\347\201\257/note-2021-05-26.md"
new file mode 100644
index 0000000000000000000000000000000000000000..6ad8ed87647a0d44ad109ac6a1def4c31d2f2103
--- /dev/null
+++ "b/\351\231\206\344\270\207\347\201\257/note-2021-05-26.md"
@@ -0,0 +1,126 @@
+# 处理用户输入
+
+## 处理用户的单击输入
+## 通过设置class来改变样式
+### class样式
+    <style>
+        .red {
+            background: red;
+        }
+
+        .blue {
+            background: blue;
+        }
+
+        .yellow {
+            background: yellow;
+        }
+    </style>
+### 定义标签
+    <div id="app-4">
+    //绑定一个单机事件
+        <button v-on:click="click()">点击</button>
+    //给这个标签绑定v-bind指令
+        <p :class="color[Indexes]">改变背景色</p>
+    </div>
++ v-bind:class 可以简写为:class
+## script标签内容
+    <script>
+        var app4 = new Vue({
+            el: '#app-4',
+            data: {
+                color:['red','blue','yellow'],
+                Indexes:0,
+                Identity:0
+            },
+            // this指向调用它的Vue实例
+            methods:{
+                click(){
+                    this.Identity++;
+                    this.Indexes=this.Identity % 3,
+                    console.log(this.Indexes);
+                }
+            }
+        })
+    </script>
++ 将class颜色名存入一个color(数组)中，给单击事件中绑入  根据Indexes(索引)调用当前vue实例的color数组 来逐个获取数组的值  将值赋给上面的class
++ 注意上面的class要绑定v-bind才行  要不然无法获取到下面的值
+
+## 输入和应用状态之间的双向绑定 v-model
++ 当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化
+### 定义标签
+    <div id="app-6">
+    <p>{{ msg }}</p>
+    <input v-model="msg">
+    </div>
+## script标签内容
+    var app6 = new Vue({
+    el: '#app-6',
+    data: {
+        msg: 'Hello Vue!'
+    }
+    })
++ 这样子写 可以通过JavaScript控制台或者直接在输入框里输入都能改变上面p标签里的值 这就是双向绑定
+
+
+# 组件化应用构建
+## 命名建议
++ 命名建议字母全小写加连字符  这样能跟原来的HTML元素区分开不会冲突
+## 基础尝试
+### 注册组件
+    Vue.component('demonstrate',{
+            template: '<h1>自定义组件</h1>'
+        });
++ demonstrate是组件名  也就是一个名为`<demonstrate></demonstrate>`的节点
++ templat是组件的模板
++ 模板里加入了`<h1>demonstrate自定义组件</h1>`这段话,意味着使用`<demonstrate>`节点时,`<demonstrate>`里会自带这句话
++ 注意命名  参照上面命名建议 不能跟原来的HTML元素冲突  比如element
+### 实例化vue
+    var vm = new Vue({
+        el: '#vue',
+    })
+### HTML标签
+    <div id="vue">
+        <demonstrate></demonstrate>
+    </div>
+
+## 进阶
+## 使用 props属性传递参数
+### 注册组件
+    Vue.component('demonstrate',{
+            template: '<h1>{{items}}</h1>'
+        });
+### 实例化vue
+    var vm = new Vue({
+        el: '#vue',
+        data: {
+            items: [
+                '奶酪',
+                '小龙虾',
+                '佛跳墙',
+                '小酥肉',
+                '老鼠干'
+            ]
+        }
+    })
+#### vue实例里的items的值,是不会直接传递到组件模板里的变量里的
++ Vue实例是一个父作用域，组件是子作用域，用props属性来把传递父作用域的数据传递给子作用域
++ 声明props时要注意props的类型
+## 修改组件
+    Vue.component('demonstrate',{
+            //这个prop名为test
+            props:['test'],
+            template: '<h1>{{test}}</h1>'
+        });
+## 修改HTML标签
+    <div id="vue">
+    <claw v-for="item in items" v-bind:test="item"></claw>
+    </div>
+把items的值做一个遍历  把遍历出来的数据放在item里和test绑定
+
+
+## 注意porps的命名
++ props不能使用短横线命名 会报下面的错误  
+![picture](./IMG/05-26/1.png) 
++ 但是v-bind绑定时 props大写和小写的词需要用-分隔开  比如  
+![picture](./IMG/05-26/2.png) 
\ No newline at end of file