课程名称：前端工程师
课程章节： 第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引用为什么不能写成class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{item.imgUrl}}"这个样子？
• :src是绑定形式，中间不能使用插值表达式{{ }}
• 插值表达式不能在img的src中使用

5.使用v-for指令精简代码

学习收获：

通过本次学习，学会了组件的合理拆分，使用v-for, v-html 指令精简页面代码，加油！