Axios入门

1.概念

Axios是一个开源的可以用在浏览器和node.js的异步通信框架,他的主要功能是实现Ajax异步通信

2.Axios入门程序

2.1.准备json格式的文件
{"name": "小明","address": {"street": "雁塔","city": "西安","country": "中国"}
}
2.2.编写程序
<!--axios的CDN-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><div id="app"><div>{{info.name}}</div><div>{{info.address.street}}</div>
</div><script>var vm = new Vue({el: "#app",data(){return{//返回的数据,必须和json文件的格式一样info:{name: null,address: {street: null,city: null,country: null}}}},//钩子函数mounted(){//把得到的数据返回给infoaxios.get('./data.json').then(response=>(this.info=response.data));}});
</script>
  • 在上面的程序,我们特别要关注mounted钩子函数部分,这里边写的就是Axios程序
  • 表明从data.json文件里获取数据,然后将其返回给info
  • 在vm对象的data方法中,封装了通过Axios框架获取的数据info

结果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/498854.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Failed at the phantomjs-prebuilt@2.1.16 install script.

1、问题概述&#xff1f; 在mac os系统&#xff0c;执行npm install的时候报错&#xff1a; npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! phantomjs-prebuilt2.1.16 install: node install.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the phantomjs-p…

BeautifulSoup+xpath+re+css简单复习+新的scrapy的学习

1.BeautifulSoupsoup BeautifulSoup(html,html.parser)all_icosoup.find(class_"DivTable") 2.xpath trs resp.xpath("//tbody[idcpdata]/tr") hong tr.xpath("./td[classchartball01 or classchartball20]/text()").extract() 这个意思是找…

高校水电预付费管控系统

高校水电预付费管控系统在现代高校管理中扮演着重要角色。这一系统通过整合先进的科技手段&#xff0c;如智能计量设备和互联网技术&#xff0c;实现对校园水电消费的精准监控和管理。首先&#xff0c;高校水电预付费管控系统能够有效监测学生宿舍、教学楼等区域的实时用水用电…

openGauss学习笔记-230 openGauss性能调优-系统调优-配置并行查询功能

文章目录 openGauss学习笔记-230 openGauss性能调优-系统调优-配置并行查询功能230.1 适用场景与限制230.2 资源对SMP性能的影响230.3 其他因素对SMP性能的影响230.4 配置步骤 openGauss学习笔记-230 openGauss性能调优-系统调优-配置并行查询功能 openGauss的SMP并行技术是一…

机试指南:Ch5:线性数据结构 Ch6:递归与分治

文章目录 第5章 线性数据结构1.向量 vector2.队列 queue(1)队列的特点、应用(2)基本操作(3)例题例题1&#xff1a;约瑟夫问题2 &#xff08;难度&#xff1a;中等&#xff09; (4)习题习题1&#xff1a;排队打饭 &#xff08;难度&#xff1a;中等&#xff09; 3.栈 stack(1)栈…

Unity 预制体与变体

预制体作用&#xff1a; 更改预制体&#xff0c;则更改全部的以预制体复制出的模型。 生成预制体&#xff1a; 当你建立好了一个模型&#xff0c;从层级拖动到项目中即可生成预制体。 预制体复制模型&#xff1a; 将项目中的预制体拖动到层级中即可复制。或者选择物体复制粘贴。…

【iOS ARKit】RealityKit 同步机制

协作 Session 可以很方便地实现多用户之间的AR体验实时共享&#xff0c;但开发者需要自行负责并确保AR场景的完整性&#xff0c;自行负责虚拟物体的创建与销毁。为简化同步操作&#xff0c;RealityKit 内建了同步机制&#xff0c;RealityKit 同步机制基于 Multipeer Connectivi…

Linux系统Docker部署Nexus Maven并实现远程访问本地管理界面

文章目录 1. Docker安装Nexus2. 本地访问Nexus3. Linux安装Cpolar4. 配置Nexus界面公网地址5. 远程访问 Nexus界面6. 固定Nexus公网地址7. 固定地址访问Nexus Nexus是一个仓库管理工具&#xff0c;用于管理和组织软件构建过程中的依赖项和构件。它与Maven密切相关&#xff0c;可…

form表单的自定义校验规则

需求&#xff1a;校验el-input输入为0-100的数字 <el-form :label-position"top" label-width"80px" ref"ogdiskForm" :model"originalDiskForm" :rules"rules" class"form"><el-form-item label"…

【粉丝福利第一期】小 明

Q1 - 能否自我介绍下&#xff1f; 嗨&#xff0c;大家好&#xff0c;我是 小 明 &#xff08;小明java问道之路&#xff09;&#xff0c;互联网大厂后端研发专家&#xff0c;2022博客之星TOP3/博客专家/CSDN后端内容合伙人、InfoQ(极客时间)签约作者、阿里云签约博主、全网5万…

Python 接口测试框架

目录结构定义 首先来看一下项目整体的结构 框架结构 代码结构 Excel 文件结构 代码详细解析 1.工具包 tools 封装操作 excel 方法 excel_operation.py import xlrd from config.config import PROJECT_PATHclass OperationExcel:def __init__(self, file_nameNone, sheet_…

【精选】Java项目介绍和界面搭建——拼图小游戏 中

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …