From 98257c06e3259fc4e7a9c10a450d483d4cb86c51 Mon Sep 17 00:00:00 2001
From: zhaoss <bek2734@dingtalk.com>
Date: Tue, 26 Apr 2022 17:26:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../exercises.md"                             |  6 +++--
 .../exercises.md"                             |  9 ++++---
 .../exercises.md"                             |  4 +--
 .../4.Vue\345\222\214jQuery/exercises.md"     |  9 ++++---
 .../exercises.md"                             |  7 ++---
 .../exercises.md"                             |  4 +--
 .../exercises.md"                             | 13 +++++----
 .../exercises.md"                             | 26 +++++++++++-------
 .../exercises.md"                             |  7 ++---
 .../exercises.md"                             |  2 +-
 .../exercises.md"                             |  5 ++--
 .../exercises.md"                             |  7 ++---
 .../exercises.md"                             |  2 +-
 .../exercises.md"                             |  7 ++---
 .../exercises.md"                             |  2 +-
 .../exercises.md"                             |  5 ++--
 .../5.v-model/1.v-model/exercises.md"         |  2 +-
 .../exercises.md"                             |  8 +++---
 .../exercises.md"                             |  5 ++--
 .../exercises.md"                             | 11 ++++----
 .../exercises.md"                             |  8 +++---
 .../exercises.md"                             |  5 ++--
 .../exercises.md"                             |  2 +-
 .../exercises.md"                             |  2 +-
 .../exercises.md"                             |  2 +-
 .../exercises.md"                             |  2 +-
 .../exercises.md"                             |  2 +-
 .../exercises.md"                             |  2 +-
 .../exercises.md"                             |  2 +-
 .../exercises.md"                             |  2 +-
 .../exercises.md"                             |  2 +-
 .../exercises.md"                             |  2 +-
 .../exercises.md"                             |  5 ++--
 .../exercises.md"                             |  2 +-
 .../exercises.md"                             |  2 +-
 .../exercises.md"                             |  8 +++---
 .../exercises.md"                             | 27 ++++++++++---------
 .../exercises.md"                             |  5 ++--
 .../exercises.md"                             |  8 +++---
 .../exercises.md"                             |  8 +++---
 .../exercises.md"                             |  4 +--
 41 files changed, 138 insertions(+), 105 deletions(-)

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 4842c86..74524e8 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"
@@ -2,7 +2,9 @@
 
  <div style="color: pink;font-size:24px">小常识：</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)
+<br/>![在这里插入图片描述](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)
+<br/>
+<br/>
 
 我们在初步了解Vue，看到Vue官方的第一句映入眼帘的就是介绍Vue的读音，所以小伙伴们既然要学习Vue以及将来使用Vue，我们第一步就是要掌握Vue的标准发音 (读音 /vjuː/，类似于 view) 
 
@@ -10,7 +12,7 @@
 
 <br>
 
- <div style="color: blue;font-size:24px">小常识：</div>
+ <div style="color: blue;font-size:24px">小测试：</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 3f3f568..3d6b31d 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,15 +1,16 @@
 # MVVM响应式
 
- <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)
-
+  <div style="color: pink;">小常识：</div>
+<br/>![在这里插入图片描述](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)
+<br/>
+<br/>
 View层体现为浏览器中的DOM树，View-Model则体现为近几年特别流行的虚拟DOM树，Model则体现为业务逻辑和ORM。
 
 
 
 <br>
 
- <div style="#FF8C00">**小测试：**</div>
+ <div style="color: blue;font-size:24px">小测试：</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 660948e..fb7699b 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,13 +1,13 @@
 # MVVM优势
 
- <div style="#6495ED" >**小常识：**</div>
+  <div style="color: pink;">小常识：</div>
 
 MVC 是开发客户端最经典的设计模式，但是 MVC 有让人无法忽视的严重问题。在通常的开发中，除了简单的 Model、View 以外的所有部分都被放在了 Controller 里面。Controller 负责显示界面、响应用户的操作、网络请求以及与 Model 交互。随着业务逻辑的增加，controller的处理逻辑会变得越来越复杂，controller也就慢慢的变得越来越胖，这就造成了Controller逻辑复杂，难以维护。为了更好地管理代码，更方便地扩展业务，为必要为controller瘦身，于是MVVM便呼之欲出。
 
 
 <br>
 
- <div style="#FF8C00">**小测试：**</div>
+ <div style="color: blue;font-size:24px">小测试：</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 72f1ade..3bfa690 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,15 +1,16 @@
 # Vue和jQuery
 
- <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)
-
+  <div style="color: pink;">小常识：</div>
+<br/>![在这里插入图片描述](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)
+<br/>
+<br/>
 jQuery是使用选择器（`$`）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：`$("lable").val();`,它还是依赖DOM元素的值。 
 Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
 
 
 <br>
 
- <div style="#FF8C00">**小测试：**</div>
+ <div style="color: blue;font-size:24px">小测试：</div>
  
 下列对于Vue和JQuery的描述不正确的是？<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.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 52c2e2e..fc5422b 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,13 @@
 # NPM命令
 
- <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)
+  <div style="color: pink;">小常识：</div>
+<br/>![在这里插入图片描述](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)
+<br/>
 安装node成功后，我们就可以使用npm，我们了解到npm有非常多的命令来供我们开发使用，赶快去尝试一下这些命令吧！！！
 
 <br>
 
- <div style="#FF8C00">**小测试：**</div>
+ <div style="color: blue;font-size:24px">小测试：</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.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 df2c3db..532047c 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安装
 
- <div style="#6495ED" >**小常识：**</div>
+  <div style="color: pink;">小常识：</div>
  
 大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
 
@@ -20,7 +20,7 @@ $ cnpm install [name]
 
 <br>
 
- <div style="#FF8C00">**小测试：**</div>
+ <div style="color: blue;font-size:24px">小测试：</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.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 215c349..34a2dc6 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,17 +1,20 @@
 # Vue安装
 
- <div style="#6495ED" >**小常识：**</div>
+  <div style="color: pink;">小常识：</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)
+ npm<br/>![在这里插入图片描述](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)
+<br/>
  命令行工具（如果大家已经接触过Vue，可以使用这种方式）
- ![在这里插入图片描述](https://img-blog.csdnimg.cn/6c8d2a138a924101984aaafa57188d33.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+ <br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/6c8d2a138a924101984aaafa57188d33.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+<br/>
  通过 script 标签直接引入（最简单粗暴）
- ![在这里插入图片描述](https://img-blog.csdnimg.cn/478041b314a74798a978294cb057c994.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+ <br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/478041b314a74798a978294cb057c994.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+<br/>
 
 
 <br>
 
- <div style="#FF8C00">**小测试：**</div>
+ <div style="color: blue;font-size:24px">小测试：</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.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 8c0c5f8..acddee6 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"
@@ -3,11 +3,12 @@
  <div style="color: pink;font-size:24px">小常识：</div>
 
 快来开始我们的第一个Vue小案例吧！<br/>
-1. 首先你可以创建一个html文件：initA.html（文件名称随心就好）<br/>
-![在这里插入图片描述](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)
+1.首先你可以创建一个html文件：initA.html（文件名称随心就好）<br/>
+<br/>![在这里插入图片描述](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)
+<br/>
 <br/>
 
-2. 通过script标签引入Vue<br/>
+2.通过script标签引入Vue<br/>
 	
 	```html
 	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
@@ -19,26 +20,31 @@
 	```
 	<br/>
 
-	![在这里插入图片描述](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)
+	<br/>![在这里插入图片描述](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)
+<br/>
 	<br/>
 
-3. 开始初始化我们的第一个小实例<br/>
+3.开始初始化我们的第一个小实例<br/>
 
-![在这里插入图片描述](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)
+<br/>![在这里插入图片描述](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)
+<br/>
 <br/>
 我们猜想的打开页面后应该是页面是出现 你好，几何心凉！ 让我们看一下结果<br/>
-![在这里插入图片描述](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)
+<br/>![在这里插入图片描述](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)
+<br/>
 
 果然翻车了！
 
 <br/>
 
-4. 问题解决<br/>
+4.问题解决<br/>
 这是因为我们引入的位置在{{ message }}的后面了 所以浏览器根本不认识 我们将`<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>`提到head中去即可<br/>
-![在这里插入图片描述](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)
+<br/>![在这里插入图片描述](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)
+<br/>
 <br/>
 测试<br/>
-![在这里插入图片描述](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/>![在这里插入图片描述](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/>
 <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.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 b020e02..0cda80d 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,13 +1,14 @@
 # Vue生命周期
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</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)
+<br/>![在这里插入图片描述](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)
+<br/>
 Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。每一个生命周期中我们都可以进行很多操作来帮助我们完成项目需求，比如我们可以再页面初始化的生命周期函数中去请求接口。
 
 <br>
 
- <div style="#FF8C00">**小测试：**</div>
+ <div style="color: blue;font-size:24px">小测试：</div>
 
 
 Vue页面初始化时会执行哪几个生命周期函数？<br/><br/>
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"
index 9887f67..efe2de7 100644
--- "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"
@@ -1,6 +1,6 @@
 # Vue指令
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
  
  Vue指令在我们开发中使用占比很大的一部分，它让我们对数据在Dom渲染过程中起到润滑作用，巧妙的使用Vue指令让我们Dom渲染更加灵活，在某些业务的实现中Vue指令也是不可或缺的！让我们看看哪些常见的Vue指令吧！
 **v-text**
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"
index 937cb35..f51889f 100644
--- "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"
@@ -1,6 +1,6 @@
 # 计算属性
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
  计算属性在我们的Vue中是相当常见的，很多的业务逻辑中我们都有遇到过需要用到计算属性的地方，下面是小编为大家展示计算属性最简单粗暴的用法，是不是很简单呢，其实在我们的项目开发中计算属性可以写很多复杂的逻辑。
  比如我们在一个报表中有一列是展示员工工资，我们这一列的得数是依照前面各项总和再根据各种汇算我们为了dom代码中的简洁，完全可以利用到我们的计算属性
 
@@ -28,7 +28,8 @@
 ```
 
 运行结果为：
-![在这里插入图片描述](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/>![在这里插入图片描述](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/>
 
 <br>
 
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"
index 7d91ad5..721337f 100644
--- "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"
@@ -1,6 +1,6 @@
 # 侦听器
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 
 ```javascript
 <body>
@@ -35,13 +35,14 @@
   })
 </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/>![在这里插入图片描述](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/>
 
 
 前面我们看到了计算属性的强大，现在为大家介绍另一彪悍——侦听器，小编编写了上面代码，随着我们在输入框中输入数字的变化，文本框下面会出现一段话，而且会甄别出我们刚刚输入的值，以及当前输入的值，所以我们可以看出计算属性可以帮助我们处理一些计算逻辑数据，而侦听器会检测到我们数据的变化，我们就可以完成很多业务逻辑，思考下：他们两者可以互通使用么？
 <br>
 
- <div style="color: pink;">小测试：</div>
+ <div style="color: blue;font-size:24px">小测试：</div>
 
 下列关于watch的说法不正确的是？<br/><br/>
 
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 e1367a4..eed3fc9 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,6 +1,6 @@
 # 侦听器
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 
 ```js
 new Vue({
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 0569120..909a6ed 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,9 +1,10 @@
 # 过滤器
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</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)
+<br/>![在这里插入图片描述](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/>
 
 上面是小编在项目中编写的时间过滤器，并在下面dom中进行使用
 
@@ -14,7 +15,7 @@
 
 <br>
 
- <div style="color: pink;">小测试：</div>
+ <div style="color: blue;font-size:24px">小测试：</div>
 
 观察上面图片中的代码，运行后p标签中展示的是？<br/><br/>
 
diff --git "a/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" "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"
index e65b3d0..a7a62ab 100644
--- "a/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"
+++ "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,6 +1,6 @@
 # :class和:style
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 
 ```js
 new Vue({
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 be349c5..71af528 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,6 +1,6 @@
 # Vue修饰符
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 
 **事件修饰符**
 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
@@ -23,7 +23,8 @@
 
 
 **系统修饰键**
-![在这里插入图片描述](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/>![在这里插入图片描述](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/>
 
 
 <br>
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 3882839..d82cd20 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,6 +1,6 @@
 # v-model
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 
  v-model 指令我们大家很熟悉了吧，该指令可以在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
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 e8132a4..63cfd38 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,11 +1,13 @@
 # v-model修饰符
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</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/>![在这里插入图片描述](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)
+<br/>
+<br/>![在这里插入图片描述](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/>
 
 
 <br>
diff --git "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/1.\345\205\250\345\261\200\344\270\216\345\261\200\351\203\250\347\273\204\344\273\266/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/1.\345\205\250\345\261\200\344\270\216\345\261\200\351\203\250\347\273\204\344\273\266/exercises.md"
index 233ed4f..203f353 100644
--- "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/1.\345\205\250\345\261\200\344\270\216\345\261\200\351\203\250\347\273\204\344\273\266/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/1.\345\205\250\345\261\200\344\270\216\345\261\200\351\203\250\347\273\204\344\273\266/exercises.md"
@@ -1,6 +1,6 @@
 # 全局与局部组件
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **定义组件名的方式有两种：**</br>
@@ -146,7 +146,8 @@ export default {
 </html>
 ```
 **运行会报错**</br>
-![在这里插入图片描述](https://img-blog.csdnimg.cn/113a151dfcbb496f9378f29f5621b98f.png)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/113a151dfcbb496f9378f29f5621b98f.png)
+<br/>
 
 
 <br>
diff --git "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/2.\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/2.\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md"
index 1e7bc77..8513ecc 100644
--- "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/2.\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/2.\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md"
@@ -1,6 +1,6 @@
 # 父子组件通讯
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **父传子**<br>
@@ -8,9 +8,10 @@
 - 在子组件中定义props属性 值为数组类似于data 但data中的数据来自本身 而props中的数据来自父组件
 - 子组件使用模板中使用props中的属性和data中的用法相同
 - 父组件通过props传值给子组件
-![在这里插入图片描述](https://img-blog.csdnimg.cn/2020040312014626.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/2020040312014626.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
 输出结果为：
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403120217164.png)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403120217164.png)
+<br/>
 说明：
 1. 创建Vue实例 data中的数据msg为一个数组
 2. 创建组件 在整个项目中 2组件相对就是1的子组件 
@@ -23,7 +24,7 @@
 
 - 父组件使用子组件时 在其中定义一个自定义事件 并且绑定父组件中的一个自定义函数 当事件被调用时执行自定义函数
 - 子组件通过this$emit执行自定义事件
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403121933688.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403121933688.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
 最终输出结果为3
 1. 在子组件中定义一个点击事件 触发时执行子组件中的dian函数 并且将参数传入函数中
 2. 在上面的函数中通过this.$emit（‘事件名称’，参数）调用3中的a自定义事件并且将参数传过去
@@ -31,7 +32,7 @@
 
 **实例改造**<br>
 根据父子组件之间的数据传递实现产品列表的组件化开发
-![在这里插入图片描述](https://img-blog.csdnimg.cn/2020040312280456.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/2020040312280456.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
 **代码如下**
 
 ```
diff --git "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md"
index cf48eea..25c258f 100644
--- "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md"
@@ -1,6 +1,6 @@
 # 非父子组件通讯
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **原理：**<br>
@@ -14,7 +14,7 @@ const bus =new Vue()
 >2. 组件B触发bus上对应的事件，把 值当成参数来传递
 >3. 组件A通过事件处理程序获取数据
 >
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403124524548.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403124524548.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
 **最终点击h2控制台会输出2**<br>
 1. 创建1和2两个非父子组件以及vue实例bus
 2. 在1组件中 钩子函数created中通过**bus.$on**为bus自定义一个事件aa 
@@ -26,9 +26,9 @@ const bus =new Vue()
 **通过非父子组件 实现开关灯案例**<br>
 
 关闭状态：
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403125323123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403125323123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
 开启状态：
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403125354722.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403125354722.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
 **代码如下**
 
 ```
diff --git "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/4.slot\346\217\222\346\247\275/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/4.slot\346\217\222\346\247\275/exercises.md"
index 1b26c06..dbc7bd7 100644
--- "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/4.slot\346\217\222\346\247\275/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/4.slot\346\217\222\346\247\275/exercises.md"
@@ -1,6 +1,6 @@
 # 插槽
 
-  <div style="color: pink;">小常识：</div>
+  <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 下方的alert-box是一个组件，和 HTML 元素一样，我们经常需要向一个组件传递内容，像这样：
@@ -12,7 +12,8 @@
 ```
 
 可能会渲染出这样的东西：<br>
-![在这里插入图片描述](https://img-blog.csdnimg.cn/7a782ff974ab4eee995d84c15b2a81f1.png)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/7a782ff974ab4eee995d84c15b2a81f1.png)
+<br/>
 
 
 幸好，Vue 自定义的 `<slot>` 元素让这变得非常简单：
diff --git "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/5.\345\212\250\346\200\201\347\273\204\344\273\266\343\200\201\345\274\202\346\255\245\347\273\204\344\273\266/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/5.\345\212\250\346\200\201\347\273\204\344\273\266\343\200\201\345\274\202\346\255\245\347\273\204\344\273\266/exercises.md"
index 04f4e40..888eefe 100644
--- "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/5.\345\212\250\346\200\201\347\273\204\344\273\266\343\200\201\345\274\202\346\255\245\347\273\204\344\273\266/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/5.\345\212\250\346\200\201\347\273\204\344\273\266\343\200\201\345\274\202\346\255\245\347\273\204\344\273\266/exercises.md"
@@ -1,6 +1,6 @@
 # 动态组件、异步组件
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **动态组件**
diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/1.vue-router\346\230\257\344\273\200\344\271\210\357\274\237/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/1.vue-router\346\230\257\344\273\200\344\271\210\357\274\237/exercises.md"
index 1e7021b..d6b2b78 100644
--- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/1.vue-router\346\230\257\344\273\200\344\271\210\357\274\237/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/1.vue-router\346\230\257\344\273\200\344\271\210\357\274\237/exercises.md"
@@ -1,6 +1,6 @@
 # vue-router是什么？
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **概念**
diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/2.\350\267\257\347\224\261\345\256\211\350\243\205/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/2.\350\267\257\347\224\261\345\256\211\350\243\205/exercises.md"
index de1bb0c..0bd2a88 100644
--- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/2.\350\267\257\347\224\261\345\256\211\350\243\205/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/2.\350\267\257\347\224\261\345\256\211\350\243\205/exercises.md"
@@ -1,7 +1,7 @@
 # 路由安装
 
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **直接下载 / CDN**
diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/3.\347\274\226\347\250\213\345\274\217\347\232\204\345\257\274\350\210\252/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/3.\347\274\226\347\250\213\345\274\217\347\232\204\345\257\274\350\210\252/exercises.md"
index c2bc761..7722b7c 100644
--- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/3.\347\274\226\347\250\213\345\274\217\347\232\204\345\257\274\350\210\252/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/3.\347\274\226\347\250\213\345\274\217\347\232\204\345\257\274\350\210\252/exercises.md"
@@ -1,6 +1,6 @@
 # 编程式的导航
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **编程式导航**
diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/exercises.md"
index 1f42504..6abe9e4 100644
--- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/exercises.md"
@@ -1,6 +1,6 @@
 # 动态路由
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **动态路由**
diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/5.\350\267\257\347\224\261\347\273\204\344\273\266\344\274\240\345\217\202/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/5.\350\267\257\347\224\261\347\273\204\344\273\266\344\274\240\345\217\202/exercises.md"
index df8f242..fd54591 100644
--- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/5.\350\267\257\347\224\261\347\273\204\344\273\266\344\274\240\345\217\202/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/5.\350\267\257\347\224\261\347\273\204\344\273\266\344\274\240\345\217\202/exercises.md"
@@ -1,6 +1,6 @@
 # 路由组件传参
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **将 props 传递给路由组件**
diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/6.\350\267\257\347\224\261\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/6.\350\267\257\347\224\261\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215/exercises.md"
index c92d28a..d03bc0b 100644
--- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/6.\350\267\257\347\224\261\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/6.\350\267\257\347\224\261\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215/exercises.md"
@@ -1,6 +1,6 @@
 # 路由重定向和别名
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **重定向**
diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/7.\350\267\257\347\224\261\346\250\241\345\274\217/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/7.\350\267\257\347\224\261\346\250\241\345\274\217/exercises.md"
index 084188c..f038bb9 100644
--- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/7.\350\267\257\347\224\261\346\250\241\345\274\217/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/7.\350\267\257\347\224\261\346\250\241\345\274\217/exercises.md"
@@ -1,6 +1,6 @@
 # 路由模式
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **hash模式**
diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.md"
index 4bd17d3..933bb13 100644
--- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.md"
@@ -1,6 +1,6 @@
 # 前置路由守卫
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 你可以使用 router.beforeEach 注册一个全局前置守卫：
diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/9.\345\220\216\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/9.\345\220\216\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.md"
index 7bd63f3..3c578eb 100644
--- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/9.\345\220\216\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/9.\345\220\216\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.md"
@@ -1,6 +1,6 @@
 # 后置路由守卫
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **全局后置钩子**
diff --git "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/1.VueX\346\230\257\344\273\200\344\271\210\357\274\237/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/1.VueX\346\230\257\344\273\200\344\271\210\357\274\237/exercises.md"
index 4d790f7..7f57aab 100644
--- "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/1.VueX\346\230\257\344\273\200\344\271\210\357\274\237/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/1.VueX\346\230\257\344\273\200\344\271\210\357\274\237/exercises.md"
@@ -1,6 +1,6 @@
 # VueX是什么
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **什么是vuex**
@@ -37,7 +37,8 @@ createApp(Counter).mount('#app')
 视图，以声明方式将状态映射到视图；
 操作，响应在视图上的用户输入导致的状态变化。
 以下是一个表示“单向数据流”理念的简单示意：
-![在这里插入图片描述](https://img-blog.csdnimg.cn/1aff3691c4c24274bf9d93ae04269acd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_18,color_FFFFFF,t_70,g_se,x_16)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/1aff3691c4c24274bf9d93ae04269acd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_18,color_FFFFFF,t_70,g_se,x_16)
+<br/>
 但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
 
 多个视图依赖于同一状态。
diff --git "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/2.Vuex\347\232\204\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/2.Vuex\347\232\204\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.md"
index eeb4d1d..e63938f 100644
--- "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/2.Vuex\347\232\204\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/2.Vuex\347\232\204\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.md"
@@ -1,6 +1,6 @@
 # VueX的安装与配置
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **安装**
diff --git "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/3.VueX\347\232\204\346\240\270\345\277\203\345\206\205\345\256\271/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/3.VueX\347\232\204\346\240\270\345\277\203\345\206\205\345\256\271/exercises.md"
index b0339c8..c50ef12 100644
--- "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/3.VueX\347\232\204\346\240\270\345\277\203\345\206\205\345\256\271/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/3.VueX\347\232\204\346\240\270\345\277\203\345\206\205\345\256\271/exercises.md"
@@ -1,6 +1,6 @@
 # VueX核心内容
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **State**
diff --git "a/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/1.vue-cli\350\204\232\346\211\213\346\236\266\345\256\211\350\243\205/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/1.vue-cli\350\204\232\346\211\213\346\236\266\345\256\211\350\243\205/exercises.md"
index 9459be8..dffff98 100644
--- "a/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/1.vue-cli\350\204\232\346\211\213\346\236\266\345\256\211\350\243\205/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/1.vue-cli\350\204\232\346\211\213\346\236\266\345\256\211\350\243\205/exercises.md"
@@ -1,6 +1,6 @@
 # vue-cli脚手架安装
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **介绍**
@@ -20,7 +20,8 @@ Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种
 
   脚手架是为了保证各施工过程顺利进行而搭设的工作平台
 
-![在这里插入图片描述](https://img-blog.csdnimg.cn/37dd9466b3074d74be4bb5120a3c5d2c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/37dd9466b3074d74be4bb5120a3c5d2c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+<br/>
 
 
 **vue-cli的好处**
@@ -58,7 +59,8 @@ npm install -g @vue/cli
 vue -V
 ```
 
-![在这里插入图片描述](https://img-blog.csdnimg.cn/7687d0d9971b4bda9546fea647c6c206.png)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/7687d0d9971b4bda9546fea647c6c206.png)
+<br/>
 
 总结: 如果出现版本号就安装成功, 否则失败
 
diff --git "a/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/2.\351\200\232\350\277\207\350\204\232\346\211\213\346\236\266\346\236\204\345\273\272\351\241\271\347\233\256/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/2.\351\200\232\350\277\207\350\204\232\346\211\213\346\236\266\346\236\204\345\273\272\351\241\271\347\233\256/exercises.md"
index 0cfd562..c926c6b 100644
--- "a/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/2.\351\200\232\350\277\207\350\204\232\346\211\213\346\236\266\346\236\204\345\273\272\351\241\271\347\233\256/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/2.\351\200\232\350\277\207\350\204\232\346\211\213\346\236\266\346\236\204\345\273\272\351\241\271\347\233\256/exercises.md"
@@ -1,34 +1,37 @@
 # 通过脚手架创建项目
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 **创建Vue项目**
 > 在要创建项目的文件夹下面打开Powershell窗口
 
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200728104924858.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200728104924858.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
 
 > 输入命令 vue create 项目名称
 
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230344767.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230344767.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
 选择第二项
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230458492.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230458492.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
 回车后
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230604113.png)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230604113.png)
+<br/>
 选择是否使用历史路由   no 回车
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230655384.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230655384.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
 选择 Less 回车
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230733469.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230733469.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
 选择第三个 回车
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230815578.png)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230815578.png)
+<br/>
 选择第一个 回车
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230835328.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230835328.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
 选择第一个 回车
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230905737.png)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230905737.png)
+<br/>
 是否保存模板 选择no
- ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721231628826.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+ <br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721231628826.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
  完成啦
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721233714426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721233714426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
 
 <br>
 
diff --git "a/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/3.vue-cli\346\234\215\345\212\241\345\221\275\344\273\244/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/3.vue-cli\346\234\215\345\212\241\345\221\275\344\273\244/exercises.md"
index 1fd4def..81806c6 100644
--- "a/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/3.vue-cli\346\234\215\345\212\241\345\221\275\344\273\244/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/3.vue-cli\346\234\215\345\212\241\345\221\275\344\273\244/exercises.md"
@@ -1,6 +1,6 @@
 # 路由安装
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 在一个 Vue CLI 项目中，`@vue/cli-service` 安装了一个名为 vue-cli-service 的命令。你可以在 `npm scripts` 中以 `vue-cli-service`、或者从终端中以 `./node_modules/.bin/vue-cli-service` 访问这个命令。
@@ -36,7 +36,8 @@ yarn serve
 你可以通过 vue ui 命令使用 GUI 运行更多的特性脚本。
 
 这里有一个 GUI 的 webpack Analyzer：
-![在这里插入图片描述](https://img-blog.csdnimg.cn/b7d32be15024431a842828d16a304032.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/b7d32be15024431a842828d16a304032.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+<br/>
 
 
 
diff --git "a/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/4.vue.config.js\347\232\204\351\205\215\347\275\256/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/4.vue.config.js\347\232\204\351\205\215\347\275\256/exercises.md"
index 2abedf7..908b599 100644
--- "a/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/4.vue.config.js\347\232\204\351\205\215\347\275\256/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/4.vue.config.js\347\232\204\351\205\215\347\275\256/exercises.md"
@@ -1,12 +1,14 @@
 # vue.config.js的配置
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
 当我们使用cli脚手架创建好vue项目后，我们还需要新建一个js文件  `vue.config.js` 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
-![在这里插入图片描述](https://img-blog.csdnimg.cn/b9a935a4be054a3a9dff66ae2a1c00e8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_12,color_FFFFFF,t_70,g_se,x_16)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/b9a935a4be054a3a9dff66ae2a1c00e8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_12,color_FFFFFF,t_70,g_se,x_16)
+<br/>
 脚手架默认是不会添加这个文件的，但是我们对于Vue的一些全局配置，以及我们开发过程中的代理都是可以写在这里的
-![在这里插入图片描述](https://img-blog.csdnimg.cn/e8e79d8bbba44cf9b16c5babbbe7b5a0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/e8e79d8bbba44cf9b16c5babbbe7b5a0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+<br/>
 可配置项
 
 **publicPath** 
diff --git "a/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/5.ESLint\350\257\255\346\263\225\350\247\204\345\210\231\346\217\222\344\273\266\351\205\215\347\275\256/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/5.ESLint\350\257\255\346\263\225\350\247\204\345\210\231\346\217\222\344\273\266\351\205\215\347\275\256/exercises.md"
index 8ef2979..924ad2f 100644
--- "a/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/5.ESLint\350\257\255\346\263\225\350\247\204\345\210\231\346\217\222\344\273\266\351\205\215\347\275\256/exercises.md"
+++ "b/data/2.Vue\344\270\255\351\230\266/4.Vue-cli/5.ESLint\350\257\255\346\263\225\350\247\204\345\210\231\346\217\222\344\273\266\351\205\215\347\275\256/exercises.md"
@@ -1,10 +1,10 @@
 # ESLint语法规则插件配置
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 <br>
 
  在我们使用Vue脚手架 创建项目时 尤其是团队共同开发项目时 会按照一个共同的代码规范来编程 创建Vue脚手架中有一个.eslintrc.js格式 但是在编程中我们通常会使用 shift+alt+f 进行代码格式化  但是由于格式化后的代码 与Vue中的.eslintrc规范不协调  尤其是 “” ； 以及空格的把控   
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200507161958790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200507161958790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
 以上就是使用不同的代码规范格式代码后的结果 
 
 **解决办法：Eslint**
@@ -12,10 +12,10 @@
 配置Eslint
 他是VScode中的一个插件
 #### 1.安装插件
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200507162345986.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200507162345986.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
 
 #### 2.配置如下代码;
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20200507162601754.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
+<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200507162601754.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)
 
 ```
   // 配置 eslint  
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"
index 6dcb227..39849e4 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/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"
@@ -1,6 +1,6 @@
 # Vue指令
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
  
 我们通常用的文本框当我们进入页面后需要点击后才会获取焦点的，但是我们可以自定义一个指令为 input ，当页面进入后自动获取焦点，下面就是一个简单的自定义指令的小案例啦  大家可以尝试一下哦！
 ```javascript
@@ -49,7 +49,7 @@ Vue.directive('focus', {
 
 <br>
 
- <div style="color: pink;">小测试：</div>
+ <div style="color: blue;font-size:24px">小测试：</div>
 vue的自定义指令错误的是？<br/><br/>
 
 ## 答案
-- 
GitLab