课程名称：前端工程师
课程章节： 第2章 项目首页开发
主讲老师：Dell
课程内容： 第2章 仿"京东到家"首页开发
作者：柠檬a
2-6首页组件的合理拆分 非常重要！！！！！important
1. 功能组件
- 组件: 就是页面的一部分: 后期方便维护，的代码更加轻巧
- 组件的定义和引用
2. 组件拆解
- 1）Static Part 静态区域： 首页的搜索框，按钮等内容
- 2）Home.vue中要引入Home拆分出来的StaticPart部分的组件
比如 在Home.vue中引入并注册StaticPart的部分组件
在模版中使用StaticPart的组件
2-7使用v-for, v-html 指令精简页面代码
1. 使用v-html：v-html指令是设置innerHTML
2.v-bind:class的绑定：
- 1）‘docker__item’:true. 表示docker__item样式展示
- 2）'docker__item–active:index=0’. 表示当index=0的时候，展示样式，变成蓝色！
3. 使用模版字符串${item.imgName}
4. 使用插值表达式使用规则
- src引用为什么不能写成src="{{item.imgUrl}}"这个样子？
- :src是绑定形式，中间不能使用插值表达式{{ }}
- 插值表达式不能在img的src中使用
5.使用v-for指令精简代码
学习收获：
通过本次学习，学会了组件的合理拆分，使用v-for, v-html 指令精简页面代码，加油！