当前位置: 首页 > news >正文

vue 中 axios 的安装及使用

vue 中 axios 的安装及使用

  • 1. axios 安装
  • 2. axios使用

1. axios 安装

首先,打开当前的项目终端,输入

npm install axios --save-dev

在这里插入图片描述

验证是否安装成功,检查项目根目录下的 package.json,其中的 devDependencies 里面会多出一个axios及其版本号。

在这里插入图片描述

2. axios使用

<template><div class="main"><div class="box"><ul><li v-for="item in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div></div>
</template><script>import axios  from 'axios'// 接口地址:http://hmajax.itheima.net/api/news
// 请求方式:get
export default {data () {return {list: []}},async created () {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')// 2. 更新到 list 中this.list = res.data.data}
}
</script><style>
</style>
http://www.lryc.cn/news/139917.html

相关文章:

  • 数据结构——线性数据结构(数组,链表,栈,队列)
  • 多态(C++)
  • 算法leetcode|73. 矩阵置零(rust重拳出击)
  • axios 二次封装
  • Rust安全之数值
  • 4种方法实现html 页面内锚点定位及跳转
  • gitlab配置备忘
  • 基于Centos搭建k8s仓库
  • 浅谈泛在电力物联网发展形态与技术挑战
  • git reset --soft 用法
  • 哪些测试仪器可以用于检测静电中和设备的性能
  • 浅析 GlusterFS 与 JuiceFS 的架构异同
  • ARM开发,stm32mp157a-A7核PWM实验(驱动蜂鸣器,风扇,马达工作)
  • 群狼调研(长沙眼镜店神秘顾客)|消费者需求研究方案
  • 电脑入门:宽带路由器常见故障排除技巧
  • 基于云原生网关的流量防护实践
  • 开源与云计算:新的合作模式
  • 前端需要理解的跨平台知识
  • 《基于 Vue 组件库 的 Webpack5 配置》3.将 CSS 提取到单独的文件
  • 2023CCF图形学启明星计划夏令营感想记录
  • 如何解决“缺失msvcp110.dll”错误,msvcp110.dll丢失要怎样才能修复
  • 激活函数总结(二十):激活函数补充(SQNL、PLU)
  • Docker【部署 04】Docker Compose下载安装及实例Milvus Docker compose(CPU)使用说明分享
  • 23种设计模式-7种结构模式
  • 大数据Flink(六十七):SQL Table 简介及运行环境
  • WPF使用依赖注入
  • 玩转科技|了解AI平台桌面客户端—ChatBox
  • visual studio 2022.NET Core 3.1 未显示在目标框架下拉列表中
  • 人工智能项目集合推荐(数据集 模型训练 C++和Android部署)
  • C# 服务HTTPS 对 请求被中止: 未能创建 SSL/TLS 安全通道报错