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.mzph.cn/news/50423.shtml

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

相关文章

sql server 如何设置主键

开始之前 限制和局限 一个表只能包含一个 PRIMARY KEY 约束。 在 PRIMARY KEY 约束中定义的所有列都必须定义为 NOT NULL。 如果没有指定为 Null 性&#xff0c;则加入 PRIMARY KEY 约束的所有列的为 Null 性都将设置为 NOT NULL。 创建主键会自动创建相应的唯一群集索引、…

导入功能importExcel (现成直接用)

1. 实体类字段上加 Excel(name "xxx"), 表示要导入的字段 Excel(name "用户名称")private String nickName; 2. controller (post请求) /*** 导入用户数据** param file 文件* param updateSupport 是否更新支持&#xff0c;如果已存在&#xff0c;则进…

SpringBoot整合阿里云OSS,实现图片上传

在项目中&#xff0c;将图片等文件资源上传到阿里云的OSS&#xff0c;减少服务器压力。 项目中导入阿里云的SDK <dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.10.2</version>…

ffmpeg合并mp4视频文件

下载ffmpeg Download FFmpeg 2配置环境 右键此电脑-》属性-》高级系统设置 环境变量-》path 解压上面ffmpeg压缩包&#xff0c;找到bin目录&#xff0c;复制完整路径&#xff0c;添加到path环境变量中 测试ffmpeg ffmpeg合并MP4文件 创建一个文本文件&#xff0c;例如inpu…

mybatis入门Idea搭建

一、概念 1、什么是mybatis&#xff1f; MyBatis是一个开源的Java持久层框架&#xff0c;它提供了一种简化数据库访问的方式。它的主要作用是将Java对象与数据库表之间进行映射&#xff0c;使开发者可以通过面向对象的方式操作数据库&#xff0c;而不需要编写大量的SQL语句。M…

vue3 实现按钮权限管理

在做后台管理系统时&#xff0c;经常会有权限管理的功能&#xff0c;这里来记录一下关于按钮权限管理的实现方法 1、自定义指令 v-permission。新建js文件用来写指令代码。 export default function btnPerms(app) {app.directive(permission, {mounted(el, binding) {if (!p…

vscode C++17便捷配置教程(懒人版)

环境链接 以上是已经配置好的c17环境链接&#xff0c;直接下载解压即可 下载解压之后按照msys64-mingw64-bin路径打开 然后单击该路径右方空白区域可直接复制路径 然后点击开始菜单搜索“环境变量“并打开&#xff08;如图&#xff09; 然后点击右下方环境变量 之后双击下方…

22、WEB漏洞-文件上传之内容逻辑数组绕过

目录 内容及其他演示案例&#xff1a;Uploadlabs-pass13-20关卡测试CVE-2017-12615-上传-Tomcat中间件解析漏洞配合文件上传测试 图片一句话制作方法 copy 1.png /b shell.php /a webshell.jpg也可以用nopad把图片打开&#xff0c;在末尾添加一句话后门 文件头检测 图像文件信…

低压风机单片机方案

低压风机通常由电机、转子、机壳、进气管、出气管、齿轮和减速机等组成。电机带动转子旋转&#xff0c;旋转的转子带动齿轮和减速机转动&#xff0c;进而形成空气被吸入转子内部&#xff0c;通过旋转而产生的离心力把气体压缩&#xff0c;并将气体排出。 低压风机方案的主控型…

C++11并发与多线程笔记(10) future其他成员函数、shared_future、atomic

C11并发与多线程笔记&#xff08;10&#xff09; future其他成员函数、shared_future、atomic 1、std::future 的成员函数1.1 std::future_status 2、std::shared_future&#xff1a;也是个类模板3、std::atomic原子操作3.1 原子操作概念引出范例&#xff1a;3.2 基本的std::at…

Springboot+mybaits-plus+h2集成产生的一些问题(not found tables)

一、问题描述 org.h2.jdbc.JdbcSQLSyntaxErrorException: Table "EP_MAPPING" not found (this database is empty);大概就是说在引入mybatis-plus的依赖后&#xff0c;找不到数据库找不到表的问题。 排查方向&#xff1a;在引入mybatish2时&#xff0c;是可以正常…

【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint

1、运行好后自动打开浏览器 package.json中 vite后面加上 --open 2、安装eslint npm i eslint -D3、运行 eslint --init 之后&#xff0c;回答一些问题&#xff0c; 自动创建 .eslintrc 配置文件。 npx eslint --init回答问题如下&#xff1a; 使用eslint仅检查语法&…

解决出海痛点:亚马逊云科技助力智能涂鸦,实现设备互联互通

今年6月&#xff0c;《财富》&#xff08;中文版&#xff09;发布“2023年值得关注的中国出海主力”盘点&#xff0c;在七个赛道中聚焦不断开拓新领域、影响力与日俱增的出海企业。涂鸦智能顺利入选&#xff0c;作为一家全球化公司&#xff0c;相比于产品直接到海外销售的传统出…

wazuh初次理解-8-23

一、wazuh配置&#xff1a; 1、进入官网下载OVA启动软件&#xff1a; Virtual Machine (OVA) - Installation alternatives 2、进入虚拟机进行配置&#xff1a; 3、登录提示&#xff1a; 4、将网络连接模式更改为NAT&#xff0c;否则不能上网&#xff1b; 4、重启网络&#…

ahooks.js:一款强大的React Hooks库及其API使用教程(四)

一、ahooks.js简介二、ahooks.js安装三、继续ahooks.js API的介绍与使用教程51. useResetState52. useUpdateLayoutEffect53. useDeepCompareLayoutEffect54. useRafInterval55. useRafTimeout56. useTimeout57. useLockFn58. useDocumentVisibility59. useDrop60. useDrag 一、…

AI大模型潮水中,医疗数字化加速「求解」

蝴蝶挥动翅膀&#xff0c;医疗行业每个角落开始连锁反应&#xff0c;曾经被忽视的问题也愈发明显。但与之对应的是&#xff0c;对数字化和AI大模型的价值认可&#xff0c;在中国医疗赛道也正在加速来临。 作者|斗斗 编辑|皮爷 出品|产业家 重庆市某地方人民医院&#xf…

如何实现element UI中table操作栏更多按钮的展示与折叠?

解决思路: ​ 直接使用elementUI文档上Popover 弹出框组件 废话不多说,直接上代码吧 <el-table :data="locationList" v-loading="loading" border class="table" ref="multipleTable" @selection-change="handleSelecti…

【C++】做一个飞机空战小游戏(十二)——游戏源代码、音效、图标等资源文件

[导读]本系列博文内容链接如下&#xff1a; 【C】做一个飞机空战小游戏(一)——使用getch()函数获得键盘码值 【C】做一个飞机空战小游戏(二)——利用getch()函数实现键盘控制单个字符移动【C】做一个飞机空战小游戏(三)——getch()函数控制任意造型飞机图标移动 【C】做一个飞…

微信小程序创建项目以及注意事项

1.申请账号并完善信息 2.下载安装开发工具 3.开发小程序 4.上传代码 5.提交审核 6.发布 创建项目 根据需求选择模板&#xff0c;也可以不选择模板 创建完毕之后 进入页面点击终端 然后新建终端 输入npm init 一直按回车即可 安装成功 出现package.json 如何使用组件&#x…

Android 12系统源码_输入事件(一)HOME按键事件响应流程

前言 本文我们现在主要分析一下android系统对HOME按键的响应过程&#xff0c;HOME按键事件是属于系统级别的按键事件监听&#xff0c;而在Android系统中&#xff0c;系统级别的按键处理逻辑都在PhoneWindowManager这个类中。 一、interceptKeyBeforeDispatching方法分发按键事…