diff --git "a/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/1.Vue\347\256\200\344\273\213/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/1.Vue\347\256\200\344\273\213/exercises.md"
index b55b8e05313add9f89928673524716218c56dced..98ba24b37f76eb946ae073a7fa26ac83595e5422 100644
--- "a/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/1.Vue\347\256\200\344\273\213/exercises.md"
+++ "b/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/1.Vue\347\256\200\344\273\213/exercises.md"
@@ -1,7 +1,6 @@
-
 # Vue简介
 
- <font color="#6495ED" >**几何小常识：**</font>
+<div style="#6495ED" >**几何小常识：**</div>
  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/77385b1b457f4d53bcb6ca2aa7f1fba9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
 
@@ -11,7 +10,7 @@
 
 <br>
 
- <font color="#FF8C00">**心凉小测试：**</font>
+ <div style="#FF8C00">**心凉小测试：**</div>
  
 结合上面小常识，下列对Vue描述 不正确 的是？<br/><br/>
 
diff --git "a/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/2.MVVM\345\223\215\345\272\224\345\274\217/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/2.MVVM\345\223\215\345\272\224\345\274\217/exercises.md"
index 49649a77ec7878f2c6645943a3d9c1ec948cbcdb..edd344ba1bd971f74cd1758237e463e23c31d353 100644
--- "a/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/2.MVVM\345\223\215\345\272\224\345\274\217/exercises.md"
+++ "b/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/2.MVVM\345\223\215\345\272\224\345\274\217/exercises.md"
@@ -1,7 +1,6 @@
-
 # MVVM响应式
 
- <font color="#6495ED" >**几何小常识：**</font>
+ <div style="#6495ED" >**几何小常识：**</div>
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/18708ee196b14290b42f085d798b3dc7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
 
 View层体现为浏览器中的DOM树，View-Model则体现为近几年特别流行的虚拟DOM树，Model则体现为业务逻辑和ORM。
@@ -10,7 +9,7 @@ View层体现为浏览器中的DOM树，View-Model则体现为近几年特别流
 
 <br>
 
- <font color="#FF8C00">**心凉小测试：**</font>
+ <div style="#FF8C00">**心凉小测试：**</div>
  
 以下对于MVVM说法正确的是？<br/><br/>
 
diff --git "a/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/3.MVVM\344\274\230\347\202\271/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/3.MVVM\344\274\230\347\202\271/exercises.md"
index e4913894ae2c1310e86a1ce487cbeaadc198ba9b..ed6827df5e2f1e5a6589881300ff4514ad656834 100644
--- "a/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/3.MVVM\344\274\230\347\202\271/exercises.md"
+++ "b/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/3.MVVM\344\274\230\347\202\271/exercises.md"
@@ -1,14 +1,13 @@
-
 # MVVM优势
 
- <font color="#6495ED" >**几何小常识：**</font>
+ <div style="#6495ED" >**几何小常识：**</div>
 
 MVC 是开发客户端最经典的设计模式，但是 MVC 有让人无法忽视的严重问题。在通常的开发中，除了简单的 Model、View 以外的所有部分都被放在了 Controller 里面。Controller 负责显示界面、响应用户的操作、网络请求以及与 Model 交互。随着业务逻辑的增加，controller的处理逻辑会变得越来越复杂，controller也就慢慢的变得越来越胖，这就造成了Controller逻辑复杂，难以维护。为了更好地管理代码，更方便地扩展业务，为必要为controller瘦身，于是MVVM便呼之欲出。
 
 
 <br>
 
- <font color="#FF8C00">**心凉小测试：**</font>
+ <div style="#FF8C00">**心凉小测试：**</div>
  
 关于MVVM优点描述以下 不正确 的是？<br/><br/>
 
diff --git "a/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/4.Vue\345\222\214jQuery/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/4.Vue\345\222\214jQuery/exercises.md"
index cbbbd31b1b2b081670f25e8ad60874e778402806..75719fdd2eabd233b5f6285099d7265653db907c 100644
--- "a/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/4.Vue\345\222\214jQuery/exercises.md"
+++ "b/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/4.Vue\345\222\214jQuery/exercises.md"
@@ -1,6 +1,6 @@
 # Vue和jQuery
 
- <font color="#6495ED" >**几何小常识：**</font>
+ <div style="#6495ED" >**几何小常识：**</div>
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/91c59444c19e412099d8fb454baa053e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
 
 jQuery是使用选择器（`$`）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：`$("lable").val();`,它还是依赖DOM元素的值。 
@@ -9,7 +9,7 @@ Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行
 
 <br>
 
- <font color="#FF8C00">**心凉小测试：**</font>
+ <div style="#FF8C00">**心凉小测试：**</div>
  
 下列对于Vue和JQuery的描述不正确的是？<br/><br/>
 
diff --git "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/1.Node\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/1.Node\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.json"
index 587bcd748856b585894d8ccefc44d9b1b7b1cce4..f0f7d6a2ece358e555d5e7cc5bbfc320422dd905 100644
--- "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/1.Node\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.json"
+++ "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/1.Node\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "fcbf69b0702e4bbd852bc71eed4bff21"
diff --git "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/1.Node\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/1.Node\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.md"
index 5bff0478c913804709d8f7430df479e994622baf..925dc13b01a318be27acffb06ff08e49e96cc8cf 100644
--- "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/1.Node\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.md"
+++ "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/1.Node\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.md"
@@ -1,12 +1,12 @@
 # Node简介
 
+<div style="#6495ED" >**几何小常识：**</div>
 
- <font color="#6495ED" >**几何小常识：**</font>
-### 1.Node是什么
+1.Node是什么
 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时（运行环境），如浏览器也是js的运行环境，Node 也是JS的运行环境，但是将JS代码的应用场景扩展到了服务器端
-## 2.Node运行环境搭建
+2.Node运行环境搭建
 
-### 2.1安装
+2.1安装
 
 打开 [Node官网](https://nodejs.org)
 
@@ -78,9 +78,9 @@ node -v
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/3c512e87ff604e8f80520026347627a7.png)
 
 
-### 2.2环境安装失败解决办法
+2.2环境安装失败解决办法
 
-#### 2.2.1 错误代号 2502/2503
+2.2.1 错误代号 2502/2503
 
 表示当前登录系统的用户权限不足。
 
@@ -96,7 +96,7 @@ node -v
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/1881aa722cc04ced8b00615428bf0d48.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
 
 
-#### 2.2.2 环境变量问题
+2.2.2 环境变量问题
 
 在 powershell 中输入 node -v 时，会提示 node 不是可识别的命令类似的错误信息，原因在于，没有将node可执行程序路径添加到环境变量中
 
@@ -105,7 +105,7 @@ node -v
 
 <br>
 
- <font color="#FF8C00">**心凉小测试：**</font>
+ <div style="#FF8C00">**心凉小测试：**</div>
  
 下列关于Node的描述 不正确 的是？<br/><br/>
 
diff --git "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/2.NPM\345\221\275\344\273\244/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/2.NPM\345\221\275\344\273\244/exercises.json"
index 271722131347ac255a2baf5de6ab429ddb969fc5..68115eaada096e3397069a76e842dbfa102e7aed 100644
--- "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/2.NPM\345\221\275\344\273\244/exercises.json"
+++ "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/2.NPM\345\221\275\344\273\244/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "a0a9cdd4d6174efbae431e5e639e9b58"
diff --git "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/2.NPM\345\221\275\344\273\244/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/2.NPM\345\221\275\344\273\244/exercises.md"
index ad4951df6220244a05eb66b0376cbb55c3d2748e..38af13d6509c0f80c535af71cb31d4d4ff6d07e1 100644
--- "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/2.NPM\345\221\275\344\273\244/exercises.md"
+++ "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/2.NPM\345\221\275\344\273\244/exercises.md"
@@ -1,12 +1,12 @@
 # NPM命令
 
- <font color="#6495ED" >**几何小常识：**</font>
+ <div style="#6495ED" >**几何小常识：**</div>
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d5316fd17a3c4c2cae007f1004c5fc28.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
 安装node成功后，我们就可以使用npm，我们了解到npm有非常多的命令来供我们开发使用，赶快去尝试一下这些命令吧！！！
 
 <br>
 
- <font color="#FF8C00">**心凉小测试：**</font>
+ <div style="#FF8C00">**心凉小测试：**</div>
  
 关于npm常用命令不正确的是？<br/><br/>
 
diff --git "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/3.CNPM\345\256\211\350\243\205/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/3.CNPM\345\256\211\350\243\205/exercises.json"
index 1979d6a91bdcfe012f617d802e2f6dda786baf14..ba998b2957b6f0cff836ef2d8a32dceadd5f7733 100644
--- "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/3.CNPM\345\256\211\350\243\205/exercises.json"
+++ "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/3.CNPM\345\256\211\350\243\205/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "98e858bbaf914615b63bbe8e56c93672"
diff --git "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/3.CNPM\345\256\211\350\243\205/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/3.CNPM\345\256\211\350\243\205/exercises.md"
index 78d89ac0a9fde3c04099c684c3be00f508072e85..8d311150311d6d794eef515e5049d58767103f94 100644
--- "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/3.CNPM\345\256\211\350\243\205/exercises.md"
+++ "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/3.CNPM\345\256\211\350\243\205/exercises.md"
@@ -1,6 +1,6 @@
 # CNPM安装
 
- <font color="#6495ED" >**几何小常识：**</font>
+ <div style="#6495ED" >**几何小常识：**</div>
  
 大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
 
@@ -20,7 +20,7 @@ $ cnpm install [name]
 
 <br>
 
- <font color="#FF8C00">**心凉小测试：**</font>
+ <div style="#FF8C00">**心凉小测试：**</div>
  
 关于cnpm下列说法不正确的是？<br/><br/>
 
diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/1.Vue\345\256\211\350\243\205/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/1.Vue\345\256\211\350\243\205/exercises.json"
index 04d98136b2621f277a6265dd19838ed1984b8051..584986df85a2471e677765d2850d7c5c0d922f05 100644
--- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/1.Vue\345\256\211\350\243\205/exercises.json"
+++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/1.Vue\345\256\211\350\243\205/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "3a5e5d6a59794d219b4a1e9b187d7b67"
diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/1.Vue\345\256\211\350\243\205/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/1.Vue\345\256\211\350\243\205/exercises.md"
index 366ee7599cd1f1213afb299e7082dc2b0898fb5d..19c952bf3f9c356a900fec705b3149e8d108a504 100644
--- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/1.Vue\345\256\211\350\243\205/exercises.md"
+++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/1.Vue\345\256\211\350\243\205/exercises.md"
@@ -1,6 +1,6 @@
 # Vue安装
 
- <font color="#6495ED" >**几何小常识：**</font>
+ <div style="#6495ED" >**几何小常识：**</div>
  Vue官网为我们提供了多种Vue的安装方式，大家选择自己认为比较方便，比较喜欢的一种就行，因为我们前面学习了npm的使用，在这里小编推荐大家使用npm哦
  npm![在这里插入图片描述](https://img-blog.csdnimg.cn/b686cd2da3964c4d889858ecf044f82d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
  命令行工具（如果大家已经接触过Vue，可以使用这种方式）
@@ -11,7 +11,7 @@
 
 <br>
 
- <font color="#FF8C00">**心凉小测试：**</font>
+ <div style="#FF8C00">**心凉小测试：**</div>
  
 关于vue的安装下列说法不正确的是？<br/><br/>
 
diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/2.Vue\345\256\236\344\276\213/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/2.Vue\345\256\236\344\276\213/exercises.json"
index 71fa140846f4f8ce52a223d01e89edf6ed1dbb12..03490b3927d130d4a580b2868d432f8884569f6a 100644
--- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/2.Vue\345\256\236\344\276\213/exercises.json"
+++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/2.Vue\345\256\236\344\276\213/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "3933b22ba2fd4df9b19b8d32513c5617"
diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/2.Vue\345\256\236\344\276\213/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/2.Vue\345\256\236\344\276\213/exercises.md"
index d609c4a130cc301840ea6ba09f38f06c9146b383..8dc0d2f91f80e17c22a4a877a12175311e93feae 100644
--- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/2.Vue\345\256\236\344\276\213/exercises.md"
+++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/2.Vue\345\256\236\344\276\213/exercises.md"
@@ -1,19 +1,46 @@
-# Vue生命周期
-
-<!-- ✨
-几何小常识: <br/><br/>
-我们在初步了解Vue，看到Vue官方的第一句映入眼帘的就是介绍Vue的读音，所以小伙伴们既然要学习Vue以及将来使用Vue，我们第一步就是要掌握Vue的标准发音 (读音 /vjuː/，类似于 view) -->
-
-<!--## 问题 -->
-<br/>
-✨
-心凉小测试： <br/><br/>
+# Vue实例
+
+ <div style="color: pink;">几何小常识：</div>
+
+快来开始我们的第一个Vue小案例吧！
+1. 首先你可以创建一个html文件：initA.html（文件名称随心就好）
+![在这里插入图片描述](https://img-blog.csdnimg.cn/76db4a33cbb3405ea1916d9193592038.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+2. 通过script标签引入Vue
+	
+	```html
+	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
+	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+	或者：
+	
+	<!-- 生产环境版本，优化了尺寸和速度 -->
+	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+	```
+	![在这里插入图片描述](https://img-blog.csdnimg.cn/713629c551e543119001df0f8491f9bf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+3. 开始初始化我们的第一个小实例
+![在这里插入图片描述](https://img-blog.csdnimg.cn/644cf853a6e949fa8cbe4837e8dc3256.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+我们猜想的打开页面后应该是页面是出现 你好，几何心凉！ 让我们看一下结果
+![在这里插入图片描述](https://img-blog.csdnimg.cn/f157a3a7de9d4c98a5e5c984bc886f07.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+果然翻车了！
+
+
+4. 问题解决
+这是因为我们引入的位置在{{ message }}的后面了 所以浏览器根本不认识 我们将`<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>`提到head中去即可
+![在这里插入图片描述](https://img-blog.csdnimg.cn/ebd1020c48a4485386ed03f152fff537.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+测试
+![在这里插入图片描述](https://img-blog.csdnimg.cn/b278c0dc2eba41059215b7ed18d2d43b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+赶快去体验一下吧！！！
+
+<br>
+
+ <div style="#FF8C00">**心凉小测试：**</div>
+ 
 A.初始化组件依赖注入内容
 B.初始化组件生命周期标识符
 C.实例化属性合并，包含extend/mixins属性
 D.初始化事件系统
 
-上面是Vue实例挂载过程的不同阶段，请选择他们的正确顺序？<br/><br/>
+上面是Vue实例挂载过程的不同阶段，请选择他们的正确顺序是？<br/><br/>
+
 
 ## 答案
 
diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/3.Vue\347\224\237\345\221\275\345\221\250\346\234\237/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/3.Vue\347\224\237\345\221\275\345\221\250\346\234\237/exercises.json"
index 7c560d2040b92c8701d569847845ff9c5fa5b760..5e78cfd97f5bdd963c80c44cb3288e8e6309a9e4 100644
--- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/3.Vue\347\224\237\345\221\275\345\221\250\346\234\237/exercises.json"
+++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/3.Vue\347\224\237\345\221\275\345\221\250\346\234\237/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "8db420f2125b446fb6836839115c2137"
diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/3.Vue\347\224\237\345\221\275\345\221\250\346\234\237/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/3.Vue\347\224\237\345\221\275\345\221\250\346\234\237/exercises.md"
index 9c01aa09714ac6c8d53c7269cbc303a09c0444f3..4eaffca3526aed8c4f03a09c1c5a3d9f41a5abfa 100644
--- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/3.Vue\347\224\237\345\221\275\345\221\250\346\234\237/exercises.md"
+++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/3.Vue\347\224\237\345\221\275\345\221\250\346\234\237/exercises.md"
@@ -1,12 +1,14 @@
 # Vue生命周期
 
-✨
-几何小常识: <br/><br/>
-Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
+ <div style="color: pink;">几何小常识：</div>
+
+![在这里插入图片描述](https://img-blog.csdnimg.cn/72af614bcc1647ae880f77053d130483.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。每一个生命周期中我们都可以进行很多操作来帮助我们完成项目需求，比如我们可以再页面初始化的生命周期函数中去请求接口。
+
+<br>
+
+ <div style="#FF8C00">**心凉小测试：**</div>
 
-<br/>
-✨
-心凉小测试： <br/><br/>
 
 Vue页面初始化时会执行哪几个生命周期函数？<br/><br/>
 
diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/config.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/config.json"
similarity index 100%
rename from "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/config.json"
rename to "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/config.json"
diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/exercises.json"
similarity index 85%
rename from "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/exercises.json"
rename to "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/exercises.json"
index 70010163b962874fede59bf390c2a0fd993b1e5f..f8b0b0ccefa54199f2cdabc71f0087f2c8119fdd 100644
--- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/exercises.json"
+++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "fa86af9c11bb4629800d8ec89fdc2b54"
diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/exercises.md"
new file mode 100644
index 0000000000000000000000000000000000000000..15ac36476bc66139d5d772e3f5bd14fea0d79e83
--- /dev/null
+++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/exercises.md"
@@ -0,0 +1,76 @@
+# Vue指令
+
+ <div style="color: pink;">几何小常识：</div>
+ 
+ Vue指令在我们开发中使用占比很大的一部分，它让我们对数据在Dom渲染过程中起到润滑作用，巧妙的使用Vue指令让我们Dom渲染更加灵活，在某些业务的实现中Vue指令也是不可或缺的！让我们看看哪些常见的Vue指令吧！
+**v-text**
+更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。
+示例：
+```html
+<span v-text="msg"></span>
+<!-- 和下面的一样 -->
+<span>{{msg}}</span>
+```
+**v-html**
+更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
+
+```html
+<div v-html="html"></div>
+```
+**v-show**
+根据表达式之真假值，切换元素的 display CSS property。
+
+当条件变化时该指令触发过渡效果。
+
+```html
+<div v-show="isShow"></div>
+```
+**v-if v-else**
+根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
+
+```html
+<div v-if="Math.random() > 0.5">
+  Now you see me
+</div>
+<div v-else>
+  Now you don't
+</div>
+```
+**v-for**
+基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：
+```html
+<div v-for="item in items">
+  {{ item.text }}
+</div>
+```
+另外也可以为数组索引指定别名 (或者用于对象的键)：
+
+```html
+<div v-for="(item, index) in items"></div>
+<div v-for="(val, key) in object"></div>
+<div v-for="(val, name, index) in object"></div>
+```
+后面还有v-on  v-bind  v-model v-slot v-pre v-cloak等指令，大家可以在下面自己去尝试他们巧妙的作用
+<br>
+
+ <div style="color: pink;">心凉小测试：</div >
+
+看到上面众多Vue指令，我们可以想到 v-show和v-if都是根据绑定一个布尔值来切换dom的展示，那么他们有区别吗？<br/><br/>
+
+## 答案
+
+有区别，v-show是根据条件为Dom元素添加 display:none 与否来实现的；而v-if是根据条件操作绑定Dom是否存留在Dom树上实现的
+
+## 选项
+
+### A
+
+没有区别
+  
+### B
+
+有区别，v-if是根据条件为Dom元素添加 display:none 与否来实现的；而v-show是根据条件操作绑定Dom是否存留在Dom树上实现的
+
+### C
+
+有区别，v-show是根据条件为Dom元素修改 display的值为none还是为block来实现的；而v-if是根据条件操作绑定Dom是否存留在Dom树上实现的
diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.md"
deleted file mode 100644
index 871df9a605a30098d0d21334837f7b73161ecd84..0000000000000000000000000000000000000000
--- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.md"
+++ /dev/null
@@ -1,30 +0,0 @@
-# 计算属性
-
-<!-- ✨
-几何小常识: <br/><br/>
-我们在初步了解Vue，看到Vue官方的第一句映入眼帘的就是介绍Vue的读音，所以小伙伴们既然要学习Vue以及将来使用Vue，我们第一步就是要掌握Vue的标准发音 (读音 /vjuː/，类似于 view) -->
-
-<!--## 问题 -->
-<br/>
-✨
-心凉小测试： <br/><br/>
-下列关于计算属性的说法正确的是？<br/><br/>
-
-## 答案
-
-计算属性的getter和setter参数不是固定的
-
-## 选项
-
-### A
-
-computed中的函数必须要用return返回
-  
-### B
-
-计算属性不会进行缓存
-
-### C
-
-computed默认默认第一次加载不做监听
-
diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/exercises.md"
deleted file mode 100644
index e0c663142a1e3c54b71b339abd83564df865d411..0000000000000000000000000000000000000000
--- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/exercises.md"
+++ /dev/null
@@ -1,29 +0,0 @@
-# 侦听器
-
-<!-- ✨
-几何小常识: <br/><br/>
-我们在初步了解Vue，看到Vue官方的第一句映入眼帘的就是介绍Vue的读音，所以小伙伴们既然要学习Vue以及将来使用Vue，我们第一步就是要掌握Vue的标准发音 (读音 /vjuː/，类似于 view) -->
-
-<!--## 问题 -->
-<br/>
-✨
-心凉小测试： <br/><br/>
-下列关于watch的说法不正确的是？<br/><br/>
-
-## 答案
-
-watch 不支持异步
-
-## 选项
-
-### A
-
-watch 不支持缓存，数据改变或者触发重新渲染时，直接会触发相应的操作
-  
-### B
-
-监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据
-
-### C
-
-为了监听对象内部值的变化，和复杂类型的数据时使用deep深度监听
diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/config.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/config.json"
similarity index 100%
rename from "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/config.json"
rename to "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/config.json"
diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.json"
similarity index 85%
rename from "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.json"
rename to "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.json"
index c1a2d3b7d380d132d1810c01e95a624f583935f4..d23954ffadc1147a3cfb12878fe8d55fb082bb7d 100644
--- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.json"
+++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "661687fd94f040138c0bee725e7e912f"
diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.md"
new file mode 100644
index 0000000000000000000000000000000000000000..215bbea68fcb82bf6c57f55eee65eb473a69a0bb
--- /dev/null
+++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.md"
@@ -0,0 +1,55 @@
+# 计算属性
+
+ <div style="color: pink;">几何小常识：</div>
+ 计算属性在我们的Vue中是相当常见的，很多的业务逻辑中我们都有遇到过需要用到计算属性的地方，下面是小编为大家展示计算属性最简单粗暴的用法，是不是很简单呢，其实在我们的项目开发中计算属性可以写很多复杂的逻辑。
+ 比如我们在一个报表中有一列是展示员工工资，我们这一列的得数是依照前面各项总和再根据各种汇算我们为了dom代码中的简洁，完全可以利用到我们的计算属性
+
+```javascript
+<body>
+  <div id="app">
+    {{ message }}<br>
+    您的银行卡余额为{{b}}
+  </div>
+</body>
+<script>
+  var app = new Vue({
+    el: '#app',
+    data: {
+      message: '你好，几何心凉!',
+      a:3,
+    },
+    computed: {
+      b: function () {
+        return this.a + 1;
+      }
+    }
+  })
+</script>
+```
+
+运行结果为：
+![在这里插入图片描述](https://img-blog.csdnimg.cn/a6e06b50a4094cf9a7d80228f6f81d64.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+
+<br>
+
+<div style="#FF8C00">**心凉小测试：**</div>
+
+下列关于计算属性的说法正确的是？<br/><br/>
+
+## 答案
+
+计算属性的 getter 和 setter 参数不是固定的
+
+## 选项
+
+### A
+
+computed 中的函数必须要用 return 返回
+
+### B
+
+计算属性不会进行缓存
+
+### C
+
+computed 默认默认第一次加载不做监听
diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/config.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/config.json"
similarity index 100%
rename from "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/config.json"
rename to "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/config.json"
diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/exercises.json"
similarity index 85%
rename from "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/exercises.json"
rename to "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/exercises.json"
index 867f04484b51e1332ba928247e004028ae9fb49d..83a2b366fc8dd1e8ce9f1c2f0aff3124550c803b 100644
--- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/exercises.json"
+++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "2d48a438acfa491cbd0a22d4d5adeb7d"
diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/exercises.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ec183b6cfae49cae0eebc8d2f695d1fb09d943b9
--- /dev/null
+++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/exercises.md"
@@ -0,0 +1,64 @@
+# 侦听器
+
+ <div style="color: pink;">几何小常识：</div>
+
+```javascript
+<body>
+  <div id="app">
+    <!-- {{ message }}<br>
+    您的银行卡余额为{{b}} -->
+
+    <p>请输入你的幸运数字</p>
+    <input type="text" v-model="num">
+    <p>{{text}}</p>
+  </div>
+</body>
+<script>
+  var app = new Vue({
+    el: '#app',
+    data: {
+      message: '你好，几何心凉!',
+      a: 3,
+      num: '',
+      text: '',
+    },
+    computed: {
+      b: function () {
+        return this.a + 1;
+      }
+    },
+    watch: {
+      num: function (n, o) {
+        this.text = '你刚才选择了数字' + o + '，，，你现在又选择了' + n + '，，，我认为' + n + '更好'
+      },
+    },
+  })
+</script>
+```
+![在这里插入图片描述](https://img-blog.csdnimg.cn/cc8f1a8bee02416aab90c4ee26534dc1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+
+
+前面我们看到了计算属性的强大，现在为大家介绍另一彪悍——侦听器，小编编写了上面代码，随着我们在输入框中输入数字的变化，文本框下面会出现一段话，而且会甄别出我们刚刚输入的值，以及当前输入的值，所以我们可以看出计算属性可以帮助我们处理一些计算逻辑数据，而侦听器会检测到我们数据的变化，我们就可以完成很多业务逻辑，思考下：他们两者可以互通使用么？
+<br>
+
+ <div style="color: pink;">心凉小测试：</div>
+
+下列关于watch的说法不正确的是？<br/><br/>
+
+## 答案
+
+watch 不支持异步
+
+## 选项
+
+### A
+
+watch 不支持缓存，数据改变或者触发重新渲染时，直接会触发相应的操作
+  
+### B
+
+监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据
+
+### C
+
+为了监听对象内部值的变化，和复杂类型的数据时使用deep深度监听
diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/1.\346\217\222\345\200\274\350\241\250\350\276\276\345\274\217/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/1.\346\217\222\345\200\274\350\241\250\350\276\276\345\274\217/exercises.json"
index 8c495d353c79be19dd24b9334e62c55c64db2773..2be76c853c0b6bf71207c4f8c5f449ce42978065 100644
--- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/1.\346\217\222\345\200\274\350\241\250\350\276\276\345\274\217/exercises.json"
+++ "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/1.\346\217\222\345\200\274\350\241\250\350\276\276\345\274\217/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "4c0220902a95459c986531007c7be4ff"
diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/1.\346\217\222\345\200\274\350\241\250\350\276\276\345\274\217/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/1.\346\217\222\345\200\274\350\241\250\350\276\276\345\274\217/exercises.md"
index 84cb3cd94e26d1c2eb943ceda4f08327bd71c3e7..d2f07d1b6759edc7713b32af22f35b9295f7145f 100644
--- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/1.\346\217\222\345\200\274\350\241\250\350\276\276\345\274\217/exercises.md"
+++ "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/1.\346\217\222\345\200\274\350\241\250\350\276\276\345\274\217/exercises.md"
@@ -1,14 +1,6 @@
 # 侦听器
 
-<!-- ✨
-几何小常识: <br/><br/>
-我们在初步了解Vue，看到Vue官方的第一句映入眼帘的就是介绍Vue的读音，所以小伙伴们既然要学习Vue以及将来使用Vue，我们第一步就是要掌握Vue的标准发音 (读音 /vjuː/，类似于 view) -->
-
-<!--## 问题 -->
-
-<br/>
-✨
-心凉小测试： <br/><br/>
+ <div style="color: pink;">几何小常识：</div>
 
 ```js
 new Vue({
@@ -28,6 +20,11 @@ new Vue({
 })
 ```
 
+<br>
+
+ <div style="color: pink;">心凉小测试：</div >
+
+
 参照上面代码段，下列表达式不能正常渲染的是？<br/><br/>
 
 ## 答案
diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/2.Vue\350\277\207\346\273\244\345\231\250/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/2.Vue\350\277\207\346\273\244\345\231\250/exercises.json"
index 7180d2d5d9fafb26a93dea61e6132f5d9fc2dd60..db5773aaef27a36ec4346584741f36744fd15182 100644
--- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/2.Vue\350\277\207\346\273\244\345\231\250/exercises.json"
+++ "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/2.Vue\350\277\207\346\273\244\345\231\250/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "717faf11d8f840c0a98906917d63d265"
diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/2.Vue\350\277\207\346\273\244\345\231\250/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/2.Vue\350\277\207\346\273\244\345\231\250/exercises.md"
index 019b2be065ca9dd6e81be0a76a35fede9be55b4e..fce8f6e1aec68d5429c27a0e4347d948c6b0697f 100644
--- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/2.Vue\350\277\207\346\273\244\345\231\250/exercises.md"
+++ "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/2.Vue\350\277\207\346\273\244\345\231\250/exercises.md"
@@ -1,28 +1,37 @@
-# 侦听器
+# 过滤器
 
-<!-- ✨
-几何小常识: <br/><br/>
-我们在初步了解Vue，看到Vue官方的第一句映入眼帘的就是介绍Vue的读音，所以小伙伴们既然要学习Vue以及将来使用Vue，我们第一步就是要掌握Vue的标准发音 (读音 /vjuː/，类似于 view) -->
-
-<!--## 问题 -->
+ <div style="color: pink;">几何小常识：</div>
+ 
+ 
+![在这里插入图片描述](https://img-blog.csdnimg.cn/911c940ef6124eeca866661b857c0648.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_19,color_FFFFFF,t_70,g_se,x_16)
 
+上面是小编在项目中编写的时间过滤器，并在下面dom中进行使用
 
-<br/>
-✨
-心凉小测试： <br/><br/>
+```html
+ <!-- initDate为data中的参数，值为 1649320387776 -->
+<p>日期是：{{initDate | dateForm}}</p>
+```
 
-![在这里插入图片描述](https://img-blog.csdnimg.cn/9108fb0b07284150b6d66f6fec6d8c01.png)
-![在这里插入图片描述](https://img-blog.csdnimg.cn/911c940ef6124eeca866661b857c0648.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_19,color_FFFFFF,t_70,g_se,x_16)
+<br>
 
+ <div style="color: pink;">心凉小测试：</div>
 
-观察上面图片中的代码，对Vue过滤器使用方法是否正确？<br/><br/>
+观察上面图片中的代码，运行后p标签中展示的是？<br/><br/>
 
 ## 答案
 
-正确
+2022-04-07 16:33:07
 
 ## 选项
 
 ### A
 
-错误
+1649320387776 | undefined
+
+### B
+
+1649320387776
+
+### C
+
+t
diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/exercises.md"
deleted file mode 100644
index bd4b42cfc3dbd09fcf76ac320cf4552dd1792b14..0000000000000000000000000000000000000000
--- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/exercises.md"
+++ /dev/null
@@ -1,29 +0,0 @@
-# Vue指令
-
-<!-- ✨
-几何小常识: <br/><br/>
-Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。 -->
-
-<!-- ## 问题 -->
-<br/>
-✨
-心凉小测试： <br/><br/>
-vue的自定义指令错误的是？<br/><br/>
-
-## 答案
-
-oldVNode：上一个VNode，只在update钩子函数中有效。
-
-## 选项
-
-### A
-
-bind函数：只调用一次，指令第一次绑定在元素上调用，即初始化调用一次。
-  
-### B
-
-inserted函数：并绑定元素插入父级元素（即new vue中el绑定的元素）时调用（此时父级元素不一定转化为了dom）。
-
-### C
-
-update函数：在元素发生更新时就会调用，可以通过比较新旧的值来进行逻辑处理。
diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/config.json" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/config.json"
similarity index 100%
rename from "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/config.json"
rename to "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/config.json"
diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/exercises.json"
similarity index 85%
rename from "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/exercises.json"
rename to "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/exercises.json"
index f1a289831fd494a85db6e7694d82a9d05faea53a..df20878fd0ed4e5836d5d53729801d615ef6cd78 100644
--- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/exercises.json"
+++ "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "0ec57019306645e0a597ec6eeef94610"
diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/exercises.md"
similarity index 51%
rename from "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/exercises.md"
rename to "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/exercises.md"
index 9714c990eaa87fd7aed2c3034ab752e2078dd97d..dcf65390079840b9d7ade1e7c872f64580a6529c 100644
--- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/exercises.md"
+++ "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/exercises.md"
@@ -1,13 +1,6 @@
-# Vue 修饰符
+# :class和:style
 
-<!-- ✨
-几何小常识: <br/><br/>
-Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。 -->
-
-<!-- ## 问题 -->
-<br/>
-✨
-心凉小测试： <br/><br/>
+ <div style="color: pink;">几何小常识：</div>
 
 ```js
 new Vue({
@@ -20,11 +13,15 @@ new Vue({
 })
 ```
 
+<br>
+
+ <div style="color: pink;">心凉小测试：</div >
+
 下列对class使用错误的是？<br/><br/>
 
 ## 答案
 
-```js
+```html
 <p :class="aaa=='aaa'?'':'aaa'">日期：</p>
 ```
 
@@ -33,18 +30,18 @@ new Vue({
 ### A
 
 
-```js
+```html
 <p :class="{'name':'str'}">日期：</p>
 ```
 
 ### B
 
-```js
+```html
 <p :class="{'name':str}">日期：</p>
 ```
 
 ### C
 
-```js
+```html
 <p :class="[aaa,bbb]">日期：</p>
 ```
diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/4.\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\343\200\201\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246\343\200\201\347\263\273\347\273\237\344\277\256\351\245\260\347\254\246/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/4.\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\343\200\201\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246\343\200\201\347\263\273\347\273\237\344\277\256\351\245\260\347\254\246/exercises.json"
index bddcfc0ec5b43ffb2081eb3ed4006dd4b6035b49..c8c0e81bc5346e797636c0334d33d7be40825e14 100644
--- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/4.\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\343\200\201\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246\343\200\201\347\263\273\347\273\237\344\277\256\351\245\260\347\254\246/exercises.json"
+++ "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/4.\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\343\200\201\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246\343\200\201\347\263\273\347\273\237\344\277\256\351\245\260\347\254\246/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "c5870e6150564612952fc40507910900"
diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/4.\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\343\200\201\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246\343\200\201\347\263\273\347\273\237\344\277\256\351\245\260\347\254\246/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/4.\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\343\200\201\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246\343\200\201\347\263\273\347\273\237\344\277\256\351\245\260\347\254\246/exercises.md"
index 30071a2f3c2d07f658f19cef2f473dbe3826c17c..8e28122b1a79404ede51a2ab88d341617be6e25d 100644
--- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/4.\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\343\200\201\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246\343\200\201\347\263\273\347\273\237\344\277\256\351\245\260\347\254\246/exercises.md"
+++ "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/4.\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\343\200\201\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246\343\200\201\347\263\273\347\273\237\344\277\256\351\245\260\347\254\246/exercises.md"
@@ -1,13 +1,35 @@
 # Vue修饰符
 
-<!-- ✨
-几何小常识: <br/><br/>
-Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。 -->
-
-<!-- ## 问题 -->
-<br/>
-✨
-心凉小测试： <br/><br/>
+ <div style="color: pink;">几何小常识：</div>
+
+**事件修饰符**
+在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
+
+**按键修饰符**
+在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
+
+```html
+<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
+<input v-on:keyup.enter="submit">
+```
+
+你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
+
+```html
+<input v-on:keyup.page-down="onPageDown">
+```
+
+在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。
+
+
+**系统修饰键**
+![在这里插入图片描述](https://img-blog.csdnimg.cn/e89305e0ac7c4410b17911523e841e47.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+
+
+<br>
+
+ <div style="color: pink;">心凉小测试：</div >
+
 下列对vue常用的修饰符描述错误的是？<br/><br/>
 
 ## 答案
diff --git "a/data/1.Vue\345\210\235\351\230\266/5.v-model/1.v-model/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/5.v-model/1.v-model/exercises.json"
index 0775eefe383208308868e58b0e94e37fca131ae9..058f9022343201f56ce12cc7233a9c0a4743fb4f 100644
--- "a/data/1.Vue\345\210\235\351\230\266/5.v-model/1.v-model/exercises.json"
+++ "b/data/1.Vue\345\210\235\351\230\266/5.v-model/1.v-model/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "ec401fd5fc6045e69def928c11064719"
diff --git "a/data/1.Vue\345\210\235\351\230\266/5.v-model/1.v-model/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/5.v-model/1.v-model/exercises.md"
index f9ee190440c36c798eaac095a4bdc2c9ca1fbe26..71453ba5ed413f3b40671dd38329b01052323261 100644
--- "a/data/1.Vue\345\210\235\351\230\266/5.v-model/1.v-model/exercises.md"
+++ "b/data/1.Vue\345\210\235\351\230\266/5.v-model/1.v-model/exercises.md"
@@ -1,12 +1,53 @@
-# Vue简介
+# v-model
 
-<!-- ✨
-几何小常识: <br/><br/>
-v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。 -->
+ <div style="color: pink;">几何小常识：</div>
+
+ v-model 指令我们大家很熟悉了吧，该指令可以在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
+v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
+
+**文本框**
+下面代码中p标签的值会根据上方文本框输入的值的改变而改变。
+```html
+<input v-model="message" placeholder="edit me">
+<p>Message is: {{ message }}</p>
+```
+**复选框**
+
+```html
+<input type="checkbox" id="checkbox" v-model="checked">
+<label for="checkbox">{{ checked }}</label>
+```
+多个复选框
+
+```html
+<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
+<label for="jack">Jack</label>
+<input type="checkbox" id="john" value="John" v-model="checkedNames">
+<label for="john">John</label>
+<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
+<label for="mike">Mike</label>
+<br>
+<span>Checked names: {{ checkedNames }}</span>
+```
+**选择框**
+
+```html
+<div id="example-5">
+  <select v-model="selected">
+    <option disabled value="">请选择</option>
+    <option>A</option>
+    <option>B</option>
+    <option>C</option>
+  </select>
+  <span>Selected: {{ selected }}</span>
+</div>
+```
+上面只是为大家举了几个小案例，当然我们v-model绑定的值一定是我们在data中定义好的！
+
+<br>
+
+ <div style="color: pink;">心凉小测试：</div >
 
-<br/>
-✨
-心凉小测试： <br/><br/>
 
 下列关于 v-model 的说法，哪项是不正确的？<br/><br/>
 
diff --git "a/data/1.Vue\345\210\235\351\230\266/5.v-model/2.v-model\347\273\221\345\256\232\344\277\256\351\245\260\347\254\246/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/5.v-model/2.v-model\347\273\221\345\256\232\344\277\256\351\245\260\347\254\246/exercises.json"
index c1d818c72be878f491c1577b7945762366ec9453..181cfd7cf3f25f9501a98ebe0b96979c1c0d27b0 100644
--- "a/data/1.Vue\345\210\235\351\230\266/5.v-model/2.v-model\347\273\221\345\256\232\344\277\256\351\245\260\347\254\246/exercises.json"
+++ "b/data/1.Vue\345\210\235\351\230\266/5.v-model/2.v-model\347\273\221\345\256\232\344\277\256\351\245\260\347\254\246/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "40ac51fd2a7c45758f3db98cc5ce4f79"
diff --git "a/data/1.Vue\345\210\235\351\230\266/5.v-model/2.v-model\347\273\221\345\256\232\344\277\256\351\245\260\347\254\246/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/5.v-model/2.v-model\347\273\221\345\256\232\344\277\256\351\245\260\347\254\246/exercises.md"
index 42118b60fe8be9434cb9a705dab75dbc66eab95d..868ff1216782066f2a45d03aa15a9d49c5600a7a 100644
--- "a/data/1.Vue\345\210\235\351\230\266/5.v-model/2.v-model\347\273\221\345\256\232\344\277\256\351\245\260\347\254\246/exercises.md"
+++ "b/data/1.Vue\345\210\235\351\230\266/5.v-model/2.v-model\347\273\221\345\256\232\344\277\256\351\245\260\347\254\246/exercises.md"
@@ -1,12 +1,17 @@
-# Vue简介
+# v-model修饰符
 
-<!-- ✨
-几何小常识: <br/><br/>
-v-model可以结合trim使用 v-model.trim可以去除输入框的首尾空格，但不能去除中间的空格，可以配合v-model使用的还有很多很多哦！
+ <div style="color: pink;">几何小常识：</div>
+
+上节我们看到了v-model的运用，那么他还有一些灵活的修饰符可以配合使用，下面就是v-model常用的修饰符
+
+![在这里插入图片描述](https://img-blog.csdnimg.cn/46370cb4f4714ce69acf35b8c330f135.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+![在这里插入图片描述](https://img-blog.csdnimg.cn/0df780c7de4743c0a4285550e4f6d5f2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+
+
+<br>
+
+ <div style="color: pink;">心凉小测试：</div >
 
-<br/> -->
-✨
-心凉小测试： <br/><br/>
 
 下列不属于v-model修饰符的是？<br/><br/>
 
diff --git "a/data/2.Vue\344\270\255\351\230\266/7.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/1.\346\263\250\345\206\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/config.json" "b/data/2.Vue\344\270\255\351\230\266/7.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/1.\346\263\250\345\206\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/config.json"
index 21a4dc3e37986714bad62f4c83bc4cdf05b592c3..871d92d0c4f8bf835589ab7c291bf6e54237ff82 100644
--- "a/data/2.Vue\344\270\255\351\230\266/7.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/1.\346\263\250\345\206\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/config.json"
+++ "b/data/2.Vue\344\270\255\351\230\266/7.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/1.\346\263\250\345\206\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/config.json"
@@ -2,7 +2,9 @@
   "node_id": "vue-52bb602d32dd4af7b584430431209819",
   "keywords": [],
   "children": [],
-  "export": [],
+  "export": [
+    "exercises.json"
+  ],
   "keywords_must": [],
   "keywords_forbid": []
 }
\ No newline at end of file
diff --git "a/data/2.Vue\344\270\255\351\230\266/7.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/1.\346\263\250\345\206\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/7.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/1.\346\263\250\345\206\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/exercises.json"
new file mode 100644
index 0000000000000000000000000000000000000000..d522da9ee9881b2d07e75c2f3adc79c34e776112
--- /dev/null
+++ "b/data/2.Vue\344\270\255\351\230\266/7.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/1.\346\263\250\345\206\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/exercises.json"
@@ -0,0 +1,7 @@
+{
+  "type": "code_options",
+  "author": null,
+  "source": "exercises.md",
+  "notebook_enable": false,
+  "exercise_id": "29b2f72d9fc243618c1231f512b4e42d"
+}
\ No newline at end of file
diff --git "a/data/2.Vue\344\270\255\351\230\266/7.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/1.\346\263\250\345\206\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/7.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/1.\346\263\250\345\206\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/exercises.md"
new file mode 100644
index 0000000000000000000000000000000000000000..aec83c0f88fb600841f7bcabb235969b4152fdf9
--- /dev/null
+++ "b/data/2.Vue\344\270\255\351\230\266/7.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/1.\346\263\250\345\206\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/exercises.md"
@@ -0,0 +1,71 @@
+# Vue指令
+
+ <div style="color: pink;">几何小常识：</div>
+ 
+我们通常用的文本框当我们进入页面后需要点击后才会获取焦点的，但是我们可以自定义一个指令为 input ，当页面进入后自动获取焦点，下面就是一个简单的自定义指令的小案例啦  大家可以尝试一下哦！
+```javascript
+
+<body>
+  <div id="app">
+    <p>请输入你的幸运数字</p>
+
+    <input v-focus type="text" v-model="num">
+    <p>{{text}}</p>
+  </div>
+</body>
+<script>
+  var app = new Vue({
+    el: '#app',
+    data: {
+      message: '你好，几何心凉!',
+      a: 3,
+      num: '',
+      text: '',
+    },
+    directives: {
+      focus: {
+        // 指令的定义
+        inserted: function (el) {
+          el.focus()
+        }
+      }
+    },
+  })
+
+</script>
+```
+上面这种是简单的我们从页面中去定义指令，如果运用较多我们可以进行全局注册
+
+```javascript
+// 注册一个全局自定义指令 `v-focus`
+Vue.directive('focus', {
+  // 当被绑定的元素插入到 DOM 中时……
+  inserted: function (el) {
+    // 聚焦元素
+    el.focus()
+  }
+})
+```
+
+<br>
+
+ <div style="color: pink;">心凉小测试：</div>
+vue的自定义指令错误的是？<br/><br/>
+
+## 答案
+
+oldVNode：上一个VNode，只在update钩子函数中有效。
+
+## 选项
+
+### A
+
+bind函数：只调用一次，指令第一次绑定在元素上调用，即初始化调用一次。
+  
+### B
+
+inserted函数：并绑定元素插入父级元素（即new vue中el绑定的元素）时调用（此时父级元素不一定转化为了dom）。
+
+### C
+
+update函数：在元素发生更新时就会调用，可以通过比较新旧的值来进行逻辑处理。
diff --git "a/data/3.Vue\351\253\230\351\230\266/8.Vue\346\272\220\347\240\201\350\247\243\346\236\220/2.Object.defineProperty()/exercises.json" "b/data/3.Vue\351\253\230\351\230\266/8.Vue\346\272\220\347\240\201\350\247\243\346\236\220/2.Object.defineProperty()/exercises.json"
index 304d08bdfe61c295d191d9719d516bd300129da9..3f4307892be0f86011f83dfb4aec0bc0e31272cb 100644
--- "a/data/3.Vue\351\253\230\351\230\266/8.Vue\346\272\220\347\240\201\350\247\243\346\236\220/2.Object.defineProperty()/exercises.json"
+++ "b/data/3.Vue\351\253\230\351\230\266/8.Vue\346\272\220\347\240\201\350\247\243\346\236\220/2.Object.defineProperty()/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "2507b7c552484c5bbabb2fe261726eac"
diff --git a/data/tree.json b/data/tree.json
index e2eb13c4b82dda317318cb852bdc8b480bff633e..487475704ef2e5f560554912718a7e0d691710c4 100644
--- a/data/tree.json
+++ b/data/tree.json
@@ -175,6 +175,19 @@
                       "keywords_forbid": []
                     }
                   },
+                  {
+                    "Vue指令": {
+                      "node_id": "vue-0d1ca95100b5467d8f10261d53ad1dbf",
+                      "keywords": [
+                        "Vue指令"
+                      ],
+                      "children": [],
+                      "keywords_must": [
+                        "Vue指令"
+                      ],
+                      "keywords_forbid": []
+                    }
+                  },
                   {
                     "计算属性": {
                       "node_id": "vue-5871649f1f084586a0c98e38685f81e9",
@@ -244,14 +257,16 @@
                     }
                   },
                   {
-                    "Vue指令": {
-                      "node_id": "vue-0d1ca95100b5467d8f10261d53ad1dbf",
+                    "class和style绑定": {
+                      "node_id": "vue-7da34cba25b941628c19d600aaadb119",
                       "keywords": [
-                        "Vue指令"
+                        ":class",
+                        "动态绑定类名"
                       ],
                       "children": [],
                       "keywords_must": [
-                        "Vue指令"
+                        "Vue",
+                        ":class"
                       ],
                       "keywords_forbid": []
                     }
@@ -271,21 +286,6 @@
                       ],
                       "keywords_forbid": []
                     }
-                  },
-                  {
-                    "class和style绑定": {
-                      "node_id": "vue-7da34cba25b941628c19d600aaadb119",
-                      "keywords": [
-                        ":class",
-                        "动态绑定类名"
-                      ],
-                      "children": [],
-                      "keywords_must": [
-                        "Vue",
-                        ":class"
-                      ],
-                      "keywords_forbid": []
-                    }
                   }
                 ],
                 "keywords_must": [],