目录
- 一、背景介绍
- 1、代码可读性差，结构混乱
- 3、展示效果不美观
- 二、案例问题分析以及解决过程
- 1、代码可读性差，结构混乱
- ①以下是调整好的代码结构
- 2、逻辑边界不清晰，封装意识缺乏
- ①div块级元素
- ②、v-if 条件渲染
- ③、v-else
- 1）、示例
- ⑤、v-else-if
- 1）、示例
- 3、展示效果不美观
- ①、方案
- 三、总结
- 四、升华
一、背景介绍
本篇博客是对对项目开发中出现的代码结构混乱、逻辑编写不清晰、页面美观不足进行的总结并进行的改进。目的是将经历转变为自己的经验。通过博客的方式分享给大家，大家一起共同进步和提高。
1、代码可读性差，结构混乱
## 2、逻辑边界不清晰，封装意识缺乏
3、展示效果不美观
二、案例问题分析以及解决过程
1、代码可读性差，结构混乱
①我们经常说写的代码是让人读的，写每一行代码都要写上注释，要是没有注释，别说读了连看也不想看吧。
②代码结构混乱，没有层次，不能想写哪写哪，想放哪放哪。代码间是有关系的。
①以下是调整好的代码结构
添加足够多的注释，以及对代码结构进行分层。保证从宏观上让读代码的人一看就看出来整个代码是做什么的。代码层次结构相当清晰，代码可读性较强。
2、逻辑边界不清晰，封装意识缺乏
出现问题：没改之前的代码，是把两个div分开写的，这样可以实现，但是如无必要勿增实体。
①div块级元素
用第一个div把第二个div包了起来，这样也可以实现同样的效果。
②、v-if 条件渲染
基于表达式值的真假性，来条件性地渲染元素或者模板片段。
详细信息
当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。 可用于
表示仅包含文本或多个元素的条件块。 当条件改变时会触发过渡效果。 当同时使用时，v-if 比 v-for 优先级更高。
③、v-else
表示 v-if 或 v-if / v-else-if 链式调用的“else 块”。不需要传入表达式
详细信息
上一个兄弟元素必须有 v-if 或 v-else-if。
可用于 表示仅包含文本或多个元素的条件块。
1）、示例
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>⑤、v-else-if
表示 v-if 的“else if 块”。可以进行链式调用。
详细信息
限定：上一个兄弟元素必须有 v-if 或 v-else-if。
可用于 表示仅包含文本或多个元素的条件块。
1）、示例
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>3、展示效果不美观
不美观的地方是：活动前边的图标没有与文字对齐。
①、方案
给标签附上样式
vertical-align：是用来指定行内元素或表格单元格元素的垂直对齐方式的属性。
height: 1.5em;
vertical-align: -0.3em;
三、总结
1.对于问题三的解决方案，应该还有更好的处理方式，如将< img>标签放入到< span>标签中应该也可以解决这个问题，但是博主没有进行验证。
2. 对例如div 以及 v-if这类基础知识点需要进行掌握，还有可能写出符合逻辑以及封装性强的代码。
3. 对于代码的整洁度，结构性，一直都是诟病的问题。好的代码不仅需要自己看懂，也需要别人欣赏。
四、升华
- 条例清理，层次分明（前提：要先抽象）
- 要善于分条例、分层次、做结构化
- 要想学习好，就要学会封装
- 要做到N+1（在原来的基础上迭代新的知识），1+N（在学习新的知识时，回顾学过的知识）
- 把学过的知识，编织成知识网
- 要读出代码的味道
- 把意义搞得越丰富，越生活，越有味道
