24、商品列表页之数据渲染和传值

前言:本章算是上一章《vue父子组件之间的传值》知识点在项目中的一个实际运用。 Github:https://github.com/Ewall1106/mall(请选择分支chapter24)

1、商品列表页基本数据结构及mock

  • mock文件夹下新建goodsList.js用于存储商品数据
  • 添加json基本数据结构

mock数据基本结构

2、axios请求mock数据

  • import引入axios;
  • axios请求本地mock数据;
  • 打印并查看。

axios获取数据

console数据打印

OK,请求成功了。

3、渲染到页面上

(1)data中定义一个list对象 (2)将res.data.goodslist赋值给list (3)我们将商品图片、文字描述、价格、折扣等等信息传给子组件

传值给子组件—props down

(4)子组件接受父组件传过来的值并进行props验证

props验证

到这里我们就在goodsItem子组件中接受到了父组件传过来的一系列的值了,接下来就是在子组件中运用即可了。关于这一部分还可以进一步参考上一章的内容:vue父子组件的传值

关于props验证的解释大家可以看看官网的详细解释:Props验证

(5)使用子组件从父组件传过来的值

数据渲染

4、小结

  • 这就是我们商品列表页的基本的效果:

商品列表页

  • 这章其实就是上章vue父子组件的传值的一个实际运用,其它的axios的引入和运用算是一种对前面内容的复习而已;
  • 至于筛选工具栏的筛选功能我们等把node、MongoDB安排起来了,在具体实现这方面功能。

参考学习: Props验证 vue父子组件的传值

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏崔庆才的专栏

使用Selenium爬取淘宝商品

88270
来自专栏我的博客

Dedecms普通模型入门教程

1. 默认模板设置 里面是default后面变量名字是cfg_df_style(在模版中使用方法是{dede:golbal.cfg_df_style/}获取的路...

37660
来自专栏前端说吧

vue - 组件间通信 之 中央事件总线bus

62950
来自专栏圣杰的专栏

ABP入门系列(14)——应用BootstrapTable表格插件

源码路径:Github-LearningMpaAbp 1. 引言 之前的文章ABP入门系列(7)——分页实现讲解了如何进行分页展示,但其分页展示仅适用于前台we...

83850
来自专栏木头编程 - moTzxx

js setInterval 代码实现页面轮询

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

15130
来自专栏Golang语言社区

Golang语言社区--golang 进度下载文件

大家好,我是Golang社区主编彬哥,本篇给大家转载一篇关于文件下载相关的文章。

52060
来自专栏JMCui

css重写checkbox样式

一、前言 默认的checkbox长这样: <p> <span><input type="checkbox" /></sp...

42750
来自专栏我爱编程

Day22psutil&图形界面

psutil 用Python来编写脚本简化日常的运维工作是Python的一个重要用途。 在Python中获取系统信息的一个好办法是使用psutil这个第三方模...

29050
来自专栏圣杰的专栏

ABP入门系列(6)——定义导航菜单

完成了增删改查以及页面展示,这一节我们来为任务清单添加【导航菜单】。 在以往的项目中,大家可能会手动在layout页面中添加一个a标签来新增导航菜单,这也是一种...

233100
来自专栏崔庆才的专栏

Selenium 抓取淘宝商品

本节我们就来用 Selenium 来模拟浏览器操作,抓取淘宝的商品信息,并将结果保存到 MongoDB。

1K10

扫码关注云+社区

领取腾讯云代金券