1.3.2小节样式测试

data/1.Vue初阶/3.Vue实例/2.Vue实例/exercises.md

 # Vue实例
 
- <div style="color: pink;">小常识：</div>
+ <div style="color: pink;font-size:24px">小常识：</div>
 
-快来开始我们的第一个Vue小案例吧！
+快来开始我们的第一个Vue小案例吧！<br/>
 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
+<br/>
+
+2. 通过script标签引入Vue<br/>
 	
 	```html
 	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
@@ -15,24 +17,34 @@
 	<!-- 生产环境版本，优化了尺寸和速度 -->
 	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
 	```
+	<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)
-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/>
+我们猜想的打开页面后应该是页面是出现 你好，几何心凉！ 让我们看一下结果<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/>
+这是因为我们引入的位置在{{ message }}的后面了 所以浏览器根本不认识 我们将`<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>`提到head中去即可<br/>
 
-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)
-测试
+<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/>
 赶快去体验一下吧！！！
 
 <br>
 
- <div style="#FF8C00">**小测试：**</div>
+ <div style="color: blue;font-size:24px">小测试：</div>
  
 A.初始化组件依赖注入内容
 B.初始化组件生命周期标识符