继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【学习打卡】第4天 项目实战:Vue.js仿京东到家电商全栈项目前端开发

柠檬茶之
关注TA
已关注
手记 14
粉丝 7
获赞 12

课程名称:前端工程师
课程章节: 第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 指令精简页面代码,加油!

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP