测试

data/1.Vue初阶/3.Vue实例/5.计算属性/exercises.md

@@ -33,7 +33,7 @@
 
 <br>
 
-<div style="#FF8C00">**小测试：**</div>
+ <div style="color: blue;font-size:24px">小测试：</div>
 
 下列关于计算属性的说法正确的是？<br/><br/>
 

data/2.Vue中阶/1.Vue组件/2.父子组件通讯/exercises.md

@@ -9,6 +9,7 @@
 - 子组件使用模板中使用props中的属性和data中的用法相同
 - 父组件通过props传值给子组件
 <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)
+<br/>
 输出结果为：
 <br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403120217164.png)
 <br/>
@@ -25,6 +26,7 @@
 - 父组件使用子组件时 在其中定义一个自定义事件 并且绑定父组件中的一个自定义函数 当事件被调用时执行自定义函数
 - 子组件通过this$emit执行自定义事件
 <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)
+<br/>
 最终输出结果为3
 1. 在子组件中定义一个点击事件 触发时执行子组件中的dian函数 并且将参数传入函数中
 2. 在上面的函数中通过this.$emit（‘事件名称’，参数）调用3中的a自定义事件并且将参数传过去
@@ -33,6 +35,7 @@
 **实例改造**<br>
 根据父子组件之间的数据传递实现产品列表的组件化开发
 <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/>
 **代码如下**
 
 ```

data/2.Vue中阶/1.Vue组件/3.非父子组件通讯/exercises.md

@@ -15,6 +15,7 @@ const bus =new Vue()
 >3. 组件A通过事件处理程序获取数据
 >
 <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)
+<br/>
 **最终点击h2控制台会输出2**<br>
 1. 创建1和2两个非父子组件以及vue实例bus
 2. 在1组件中 钩子函数created中通过**bus.$on**为bus自定义一个事件aa 
@@ -27,8 +28,10 @@ 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/>
 开启状态：
 <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)
+<br/>
 **代码如下**
 
 ```

data/2.Vue中阶/2.Vue-router/3.编程式的导航/exercises.md

@@ -61,7 +61,7 @@ router.push({ path: '/user', params: { username } }) // -> /user
 它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。
 | 声明式 | 编程式 |
 |--|--|
-| <router-link :to="..." replace> | router.replace(...) |
+| `<router-link :to="..." replace>` | router.replace(...) |
 
 也可以直接在传递给 `router.push` 的 `routeLocation` 中增加一个属性 `replace: true ：`
 

data/2.Vue中阶/3.VueX状态管理/3.VueX的核心内容/exercises.md

@@ -167,6 +167,7 @@ import { mapGetters } from 'vuex'
 computed:{
   ...mapGetters(['showNum'])
 }
+```
 
 <br>
 

data/2.Vue中阶/4.Vue-cli/2.通过脚手架构建项目/exercises.md

@@ -7,31 +7,39 @@
 > 在要创建项目的文件夹下面打开Powershell窗口
 
 <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)
+<br/>
 
 > 输入命令 vue create 项目名称
 
 <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)
+<br/>
 选择第二项
 <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)
+<br/>
 回车后
 <br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230604113.png)
 <br/>
 选择是否使用历史路由   no 回车
 <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)
+<br/>
 选择 Less 回车
 <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)
+<br/>
 选择第三个 回车
 <br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230815578.png)
 <br/>
 选择第一个 回车
 <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/>
 选择第一个 回车
 <br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200721230905737.png)
 <br/>
 是否保存模板 选择no
  <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)
+<br/>
  完成啦
 <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/>
 
 <br>
 

data/2.Vue中阶/4.Vue-cli/5.ESLint语法规则插件配置/exercises.md

@@ -5,6 +5,7 @@
 
  在我们使用Vue脚手架 创建项目时 尤其是团队共同开发项目时 会按照一个共同的代码规范来编程 创建Vue脚手架中有一个.eslintrc.js格式 但是在编程中我们通常会使用 shift+alt+f 进行代码格式化  但是由于格式化后的代码 与Vue中的.eslintrc规范不协调  尤其是 “” ； 以及空格的把控   
 <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)
+<br/>
 以上就是使用不同的代码规范格式代码后的结果 
 
 **解决办法：Eslint**
@@ -13,9 +14,11 @@
 他是VScode中的一个插件
 #### 1.安装插件
 <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)
+<br/>
 
 #### 2.配置如下代码;
 <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)
+<br/>
 
 ```
   // 配置 eslint