实现created(初始化)状态axios获取数据

最新推荐文章于 2024-06-16 11:10:00 发布
最新推荐文章于 2024-06-16 11:10:00 发布
阅读量1.4k 收藏 3
点赞数 1
分类专栏： vue axios 文章标签： html5 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laoli360/article/details/120853916
版权
这里我们利用 axios请求 get方式获取 后端地址的数据然后通过前端网页控制台看res打印出来什么我们知晓了 他的具体位置 然后在data里面保存一个空对象用来存放这个书籍数据this.Bookobj=res.data.data然后让bookobj 接收这些数据然后实现页面数据显示这里 用了 v-for 是防止以后 书籍数据是多个 没法全部铺展 而设置的这里的obj.author 就是 res.data.data.author 依次...
摘要由CSDN通过智能技术生成

 这里我们利用 axios请求  get方式获取 后端地址的数据 

然后通过前端网页控制台看res打印出来什么

我们知晓了 他的具体位置 然后在data里面保存一个空对象用来存放这个书籍数据

this.Bookobj = res.data.data

 然后让bookobj 接收这些数据

然后实现页面数据显示

 这里 用了 v-for 是防止以后 书籍数据是多个 没法全部铺展 而设置的

这里的obj.author 就是 res.data.data.author   依次类推

我们就可以实现页面铺设数据

然后 有一个小小的知识点

实现单击来回切换 而且不用定义函数 来执行等等的

isShow 我们这里是true  定义一开始是隐藏的

如果想实现来回切换 用 函数来实现的话 会过于臃肿~ 而只需要 写成 isShow=!iShow 他就会在 布尔值来回切换 实现 显示隐藏来回切换  

 

老李头的代码生活
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
生命周期_组件进阶
m0_50125215的博客
07-09 237
今日学习目标 能够说出vue组件生命周期 能够掌握axios的使用 能够了解$refs, $nextTick使用和name使用 能够完成购物车案例开发 1. vue生命周期 1.0_人的-生命周期 一组件从 创建 到 销毁 的整个过程就是生命周期 1.1_钩子函数 目标: Vue 框架内置函数，随着组件的生命周期阶段，自动执行 作用: 特定的时间点，执行特定的操作 场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据 分类: 4大阶段8个方法
vue项目用created()初始化页面所需的数据
weixin_42966151的博客
12-02 3711
有过这种情况，在页面加载时，初始化所需的数据，就需要用created()了。vue.js中created方法是一个生命周期钩子函数，一个vue实例被生成后会调用这个函数。一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。以下，以一个用户信息页面举例，用axios进行post请求，使用node.js连接mysql访问数据并返回给当前form表单。第三步，新建created（）方法，并在其中调用初始化数据的方法。第一步，新建一个form表单。
axios基础学习——通过 Vue + axios 获取接口数据的小demo
黛琳ghz的博客，期待你的关注。
01-09 6470
关于这个Vue + axios 获取接口数据的小demo，实现效果很简单，就是在Vue语法中，通过axios来获取接口的数据，然后打印出来，这里我们使用的是一个笑话的接口，其中重点关注的是如何使用axios、通过axios获取接口数据，因此这里就不介绍Vue的代码了。
axios基础学习——通过 Vue + axios 获取接口数据的小demo_axios获取后端数据
最新发布
2401_84434086的博客
06-16 1086
关于这个Vue + axios 获取接口数据的小demo，实现效果很简单，就是在Vue语法中，通过axios来获取接口的数据，然后打印出来，这里我们使用的是一个笑话的接口，其中重点关注的是如何使用axios、通过axios获取接口数据，因此这里就不介绍Vue的代码了，接下来先了解学习一下axios概要和使用方法（学过的可以直接看案例）。**背景：**以前关于get、post、put等请求，我们第一时间都想到就是jQuery。
使用axios获取JSON文件数据（vue）
weixin_65314914的博客
08-07 4785
axios是一个基于Promise的HTTP客户端库，用于发送HTTP请求。它可以在浏览器和Node.js环境中使用，并提供了许多强大而且易于使用的功能，使得进行HTTP通信变得简单、直观和高效。axios的一些详细介绍：支持浏览器和Node.js环境：axios可以在浏览器和Node.js环境中都使用。这意味着你可以在多种前端和后端开发场景中统一使用axios进行网络请求。简单易用的API：axios提供了简洁、直观的API，使得发送HTTP请求变得非常容易。
vue.js中created()与activated()的个人使用理解
Y4258的博客
10-20 5547
个人理解 一、 created和mounted生命周期 created： 初始化生命周期，加载初始化数据。创建vue时，当html渲染前调用，只执行一次。 mounted： 在模板挂载之后执行，即html渲染之后调用，更新dom变化，执行一次。 二、actived是什么周期？ 在官网上，actived在keep-alive有提到过 三、actived与created actived与created都只执行一次，都可以用来加载数据 acteved在进入页面进行切换时，如果vue存在，会立刻触发函数，执
Axios异步通信.md
01-25
- `beforeCreate`：在实例初始化之后，数据观测、事件配置、`watcher`等都未被初始化时调用。 - `created`：实例创建完成，所有数据已经绑定，但是还没有挂载到DOM中。 2. **挂载阶段：** - `beforeMount`：在...
vue.js中使用echarts实现数据动态刷新功能
10-17
在Vue.js中集成ECharts库来创建数据可视化图表时，我们常常需要实现数据的动态刷新功能，以便实时展示不断变化的...确保正确初始化ECharts实例，并在数据变更时及时更新图表配置，这样就可以实现数据的实时动态刷新了。
在vue中通过axios异步使用echarts的方法
08-28
// 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')) // 绘制图表 myChart.setOption({ title: {}, tooltip: {}, xAxis: { data: [] //["衬衫",...
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
10-15
在Vue.js开发过程中，经常会遇到页面初始化时由于数据还未加载完成而导致访问数据字段时出现`undefined`的错误。这个问题通常是由于Vue组件的生命周期导致的，因为Vue组件在数据请求完成前就已经进行了初次渲染。...
浅谈vue获得后台数据无法显示到table上面的坑
10-14
在这个例子中，`created`生命周期钩子函数用于在Vue实例创建后执行，即初始化数据。使用`axios`库发送GET请求获取服务器数据，然后将返回的`response.data`赋值给`arr.uList`。这里使用`var arr = this;`是为了保留`...
axios.create()
热门推荐
JEFF_xieyuzhi的博客
11-28 2万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
axios.create的使用
weixin_43222587的博客
04-13 1万+
axios.create()是添加了自定义配置的新的axios 1.用axios发送请求 axios({ method:'POST', url:'http://localhost:8080/login', data }) 2.用axios.create创建一个新的axios发请求 cosnt instance = axios.create({ baseURL:'http://localhost:8080/' //基础路径 }) instance({ url: '/login',
Vue created/mounted 获取不到data中的数据 获取异步数据
天天开心
03-26 1万+
背景：select下拉栏中的选项数据由异步请求获得。 现在想进入这个页面，就获得select下拉框的初始默认选中数据。（因为想根据这个初始化图表） 我在created里，通过调用3个异步请求的函数，分别获得了每个下拉框的内容。这三个异步请求的函数，分别初始化了下拉框的所有选项（假设数组L1）和默认选中值（假设L1_Selected)， 在create里打印this 可以看到this指向的V...
Vue.created异步加载如何获取数据
qq_35312560的博客
10-20 5834
问题现象 使用Vue时需要加载初始化数据 如果在created异步加载初始化数据,然后把请求到的数据赋值为this.data. 此时,如果在mounted函数里获取this.data,是获取不到的, 因为异步加载需要时间,如果延迟时间是可以获取到的,但是问题是不知道延迟时间,而且这个方法也不是太好 那么如何获取到这个异步加载的数据呢, 使用watch方法的数据监听 1. wacth:...
【Vue】5 - promise、axios、created
充电五分钟...
02-09 459
文章目录1.回调函数2. Promise3. axios的简单用法 1.回调函数 回调函数:将后续的处理逻辑传入到当前要做的事情中,当前事情结束后调用执行回调函数; function cookie(callback) { setTimeout(() => { let food = '炒饭'; //执行完这个异步操作,在调用回调 callback(f...
axios之Vue请求初始化数据放在Created还是Mounted？
weixin_42776027的博客
05-20 2801
先分析下生命周期 beforecreated：el 和 data 并未初始化 created:完成了 data 数据的初始化，el没有 beforeMount：完成了 el 和 data 初始化 mounted ：完成挂载 （1）mounted 　　很多人跟我说初始化放在Mounted里面， 我问她(他)们为什么？她(他)们回答说因为这个时候DOM初始化渲染好啦。然后我继续问DOM初始化渲染和请求初始化数据有什么关系？他们会说可以显示请求出来的数据啦。（大家觉得有冲突吗？） DOM初始.
axios的使用
curry_zhao的博客
03-13 4947
Axios基于Promise的HTTP请求客户端，可同时在浏览器和node.js中使用 axios 基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API拦截请求和响应转换请求和响应数据自动转换 JSO
vue登录后初始化接口
05-31
// 调用初始化接口获取用户数据 // 示例代码，具体实现根据你的接口文档来编写 axios.get('/api/user').then(res => { this.userData = res.data; }).catch(err => { console.log(err); }); } } } ``` 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值