VUE如何用axios渲染json数据

原創 szuwaterbrother 2020-05-20 16:03

涉及到的知识点

  1. 脚手架接口请求的默认地址设置
  2. 生命周期函数的使用
  3. 父级向子级组件传值

脚手架接口请求的默认地址设置

在后端的接口尚未做出来之前，可以通过默认地址的设置让他人看懂我们的接口请求
在这里插入图片描述
在这里插入图片描述

数据动态渲染的操作过程

其实我也不太理解，但就是会用，下面拿个数组和对象赋值的例子来演习吧

  • 先data数据创一个对象和数组
  • 触发生命周期
  • 然后触发传值操作
  • 再把对象和数组父级传到子级
  • 子级组件去取值后循环渲染
    父级组件的操作在这里插入图片描述在这里插入图片描述
    子级组件的操作
  • props接收数组和声明类型

在这里插入图片描述

  • v-for实现动态渲染

在这里插入图片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

16张图解锁Spring的整体脉络

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

4ye 2021-12-04 13:03:55

JavaScript 浏览器统治地位不保？Python 有望取代

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

闫园园 2021-12-02 17:58:57

分享8个可以编译为JavaScript的语言

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

devpoint 2021-12-01 18:44:00

2021 最佳开源软件榜单出炉，Flutter、StreamNative 上榜

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-12-01 11:18:54

TypeScript 4.5 发布，带来 Promise 功能改进

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-11-19 11:23:57

Angular 13 发布：全面弃用 View Engine

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

闫园园 2021-11-05 17:43:56

微软产品经理：你不能不知道的6个Web开发者工具

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr

Christian Heilmann 2021-11-03 16:08:56

看完 Jamstack 的调查报告，我抓住了最新的 Web 流行趋势

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-10-13 17:13:59

开发者眼中的 HarmonyOS 游戏生态：有红利也有挑战

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

罗燕珊 2021-09-22 12:13:51

边缘服务的一致性、耦合和复杂性

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

Glenn Engstrand 2021-09-08 15:08:54

技术人最爱Rust，最怕COBOL，工程经理最高薪，懂Clojure最赚钱 | 2021全球开发者报告

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"概述"}]},{"t

Stack Overflow 2021-08-09 14:38:55

深入学习 React 合成事件

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

微医大前端技术 2021-07-31 20:03:59

如何从 0 到 1 搭建性能检测系统

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"t

政采云前端团队 2021-07-31 17:03:58

你不知道的 TypeScript 高级技巧

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"t

微医大前端技术 2021-07-31 11:03:58

编写高质量可维护的代码：异步优化

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"前言"}]},{"t

政采云前端团队 2021-07-31 10:03:55