diff --git "a/\347\216\213\344\273\260\346\226\207/imgs/thispicture.png" "b/\347\216\213\344\273\260\346\226\207/imgs/thispicture.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6b13b570153d2057054d28116068879210e0e381
Binary files /dev/null and "b/\347\216\213\344\273\260\346\226\207/imgs/thispicture.png" differ
diff --git "a/\347\216\213\344\273\260\346\226\207/note-2021-05-25.md" "b/\347\216\213\344\273\260\346\226\207/note-2021-05-25.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5fe19b0b45e8f73de75ad040b05dbdc8802f1864
--- /dev/null
+++ "b/\347\216\213\344\273\260\346\226\207/note-2021-05-25.md"
@@ -0,0 +1,82 @@
+# 大二第二学期课堂笔记
+
+### Description
+课堂笔记 2021-05-25
+
+### Content
+
+Vue.js的第一次笔记
+
+
+### 关于Vue
+
+1. Web前端三大JS框架：Vue, React, Angular
+```
+    Vue:     一款“用于构建直观，快速和组件化交互式界面的 MVVM (model,view,viemodel)框架”。  --尤雨溪开发
+    React:   被描述为 “用于构建用户界面的 JavaScript 库”。                                 --由 Facebook 进行开发和维护
+    Angualr: 是基于 TypeScript 的 Javascript 框架。                                      --由 Google 进行开发和维护
+
+        ————这些框架都是基于组件的
+```
+
+2. Vue.js的使用方式
+```
+    a. 引用cdn的Vue地址
+
+    b. 下载直接引用<script>标签;
+
+    c. 使用 NPM 安装或者官方提供的命令行工具(CLI)搭建脚手架。
+```
+
+
+3. 渐进式
+```
+Vue.js是一套用于构建用户界面的渐进式框架。      --渐进式：即由浅入深，由简单到复杂。
+
+    优点：  
+        a. Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
+
+        b. 拥有更高的运行效率： 基于虚拟dom，一种可以预先通过JavaScript进行各种运算，把最终的DOM操作计算出来并优化的技术，由于
+           这个DOM操作属于预处理操作，并没有真实的操作DOM，所有叫做虚拟DOM。
+        
+        c. 实现双向数据绑定：   让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上。
+```
+
+4. 响应式关联
+```
+    当把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
+    这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。
+```
+
+```
+练习
+
+    声明式渲染
+
+    <div id="app">
+        <!-- {{msg}} -->
+
+        <span v-bind:title='msg'>       //打开浏览器的 JavaScript 控制台，修改 msg 的值时浏览器界面的内容也相应更新，即实现了数据的响应式关联.
+            猜猜会显示出来什么
+        </span>        
+
+        <p v-if="seen">看不见，走位走位！！</p>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    //引用了cdn的Vue地址
+
+    <script>
+        let app = new Vue({
+            el:'#app',
+            data(){
+                return {
+                    msg:'Big Ben',
+                    seen:false,
+                }
+            }
+        });
+        console.log(app);
+
+    </script>
+
+```
\ No newline at end of file
diff --git "a/\347\216\213\344\273\260\346\226\207/note-2021-05.26.md" "b/\347\216\213\344\273\260\346\226\207/note-2021-05.26.md"
new file mode 100644
index 0000000000000000000000000000000000000000..87f8e6ee3fff40d0128d33fb5bd6116e11de7a94
--- /dev/null
+++ "b/\347\216\213\344\273\260\346\226\207/note-2021-05.26.md"
@@ -0,0 +1,91 @@
+# 大二第二学期课堂笔记
+
+### Description
+课堂笔记 2021-05-26
+
+### Content
+
+1. Vue 指令
+```
+Vue指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。
+```
+
+2. 指令 v-if 和 v-show 的区别
+```
+区别1：
+
+    v-if ：可以根据表达式的值在DOM中生成或移除一个元素。
+
+    v-show:可以根据表达式的值来显示或者隐藏HTML元素。
+
+
+区别2：
+
+    v-if:支持<template>语法；
+
+    v-show:不支持<template>语法
+
+```
+
+```
+练习
+
+    <div id="app">
+
+        <span v-if="reveal" title="显示了！！">
+            对对对！！！
+        </span>
+        <span v-else title="没有显示">
+            好可惜。。。。
+        </span>
+        <h1 v-show="display">
+            这里有显示吗？？有的有的
+        </h1>
+
+        <hr>
+
+        <template v-if="aa">        //v-if仍然有效
+            冰阔落！！
+        </template>
+        <template v-show="bb">      //v-show失效
+            可口可乐！！
+        </template>
+        
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el:'#app',
+            data(){
+                return {
+                    
+                    reveal:true,
+                    display:true,
+
+                    aa:false,
+                    bb:false
+                    
+                }                
+            }            
+        });
+    </script>
+```
+
+3. 理解 Vue 的数据响应式和 双向数据绑定
+
+```
+数据响应式(单向：将数据填充到页面):
+
+    script中的数据驱动html的内容发生改变，不需要去操作DOM（用指令与插值表达式进行数据绑定时默认就是响应式的，也就是在改数据的时候，页面内容会自己发生变化）。
+
+双向数据绑定(MVVM设计思想):
+
+    主要体现在用户输入域：----用户输入域影响数据的改变，数据改变又影响页面内容的变化。
+                        (即JavaScript中message值的变化会立即影响到UI中的内容。反过来，UI中message的变化也可以立即同步到JavaScript中的值，需要用到指令 v-model )。
+
+M: model(就是data中的数据)
+V: view(视图，也就是我们写的模板，本质上是document)
+VM: view-model(中介：提供控制逻辑将V与M结合在一起)
+```
+![图片](./imgs/thispicture.png)
\ No newline at end of file