Vue axios + Vue使用

news/2024/11/24 5:40:25/

相对于原生的阿贾克斯,axios提供的方法使用起来会更加的简便,之前网络数据获取到了,如何和vue一起使用呢?

网络应用的核心就是data中的数据一部分是通过网络获取到的。所以在方法当中发起网络请求,在响应回来之后将服务器返回的数据设置给data当中对应的值就行了!

返回的对象是response,里面有很多的属性,我们需要拿到的是data的属性。

在axios外面和里面,this会发生变化,很简单,那么就将this存储起来。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><link href="" type="text/css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><style type="text/css"></style>
</head><body>    <div id="vue"><button type="button" @click="getjokemsg()">get请求</button><p>{{ jokemsg }}</p></div><script type="text/javascript">new Vue({   el: "#vue",   data:{ jokemsg: "很好笑的笑话"},methods:{getjokemsg:function(){var that = this;axios.get("https://autumnfish.cn/api/joke").then(function(response){console.log(response.data);that.jokemsg = response.data;},function(err){console.log(err)})},    }}
)</script></body></html>


http://www.ppmy.cn/news/1001437.html

相关文章

Springboot整合activiti5,达梦数据库,mybatis中间件

Springboot整合activiti5&#xff0c;达梦数据库&#xff0c;mybatis中间件 问题现象解决方案 问题现象 由于工作流引擎不支持达梦数据库以及国产中间件&#xff0c;所以我们引入的时候会报错&#xff0c;这个时候就需要去改造代码和配置文件。各种文档和资料查找一天&#xf…

【微信小程序】导出 Excel 报表并分享,使用xlsx库生成 Excel,使用echars插入图表、使用pdfmake导出为PDF文件

这里写目录标题 生成EXCEL插入汇总和图表导出为PDF 生成EXCEL 要在微信小程序中导出 Excel 报表并分享&#xff0c;可以使用第三方库 xlsx 来生成 Excel 文件&#xff0c;并使用 wx.saveFile 方法将文件保存到本地&#xff0c;然后使用 wx.shareFile 方法来分享文件。 以下是…

Linux 基础知识

Linux 是一种自由和开源的类 Unix 操作系统。Linux 的核心&#xff0c;也被称为 Linux 内核&#xff0c;最初是由 Linus Torvalds 在 1991 年创建的。自那时起&#xff0c;它已经发展成一个稳定、安全且功能丰富的操作系统&#xff0c;被用于许多不同的环境中&#xff0c;包括桌…

elasticsearch 配置用户名和密码

无密码的其他配置项在&#xff1a;https://blog.csdn.net/Xeon_CC/article/details/132064295 elasticsearch.yml配置文件&#xff1a; xpack.security.enabled: true xpack.security.http.ssl.enabled: true xpack.security.http.ssl.keystore.path: /path/to/elastic-certi…

arcgis字段计算器

1、两字段叠加。要求待叠加的字段类型为文本或字符串类型。如下&#xff1a; 2、字符串部分提取。

每日一题8.3 345

345. 反转字符串中的元音字母 给你一个字符串 s &#xff0c;仅反转字符串中的所有元音字母&#xff0c;并返回结果字符串。 元音字母包括 a、e、i、o、u&#xff0c;且可能以大小写两种形式出现不止一次。 示例 1&#xff1a; 输入&#xff1a;s "hello" 输出&a…

Linux(四)---------网络命令(ip命令)

一.ip命令简介 IP命令是iproute软件包中强大得网络管理工具&#xff0c;包括ifconfig和route命令的作用&#xff0c;查看系统路由&#xff0c;网络设备&#xff0c;设置策略等功能。 1.查看ip命令的使用宝典 [rootlocalhost ~]# ip --help Usage: ip [ OPTIONS ] OBJECT { C…

深度学习Redis(2):持久化

前言 在上一篇文章中&#xff0c;介绍Redis的内存模型&#xff0c;从这篇文章开始&#xff0c;将依次介绍Redis高可用相关的知识——持久化、复制(及读写分离)、哨兵、以及集群。 本文将先说明上述几种技术分别解决了Redis高可用的什么问题&#xff1b;然后详细介绍Redis的持…