Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。

安装方式:

1.使用cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.使用npm安装

npm/cnpm install axios

在main.js中import axios并将其挂载到Vue实例上

import Axios from 'axios'
Vue.prototype.$axios = Axios //调用时使用this. $axios()

3.点击随机切换笑话的小例子

<template>
<div id="app">
<input type="button" name id value="获取笑话" @click="getJoke" />
<p>{{joke}}</p>
</div>
</template> <script>
export default {
name: "App",
data: () => {
return {
joke: "很好笑的笑话"
};
},
methods: {
getJoke: function() {
// axios回调函数中的this已经改变,无法访问到data中数据
// 可以var that = this; 回调函数中用that访问data中数据
var that=this;
this.$axios({
url: "https://autumnfish.cn/api/joke",
methods: "get"
}).then(
function(response) {
console.log(response.data);
that.joke=response.data
},
function(err) {}
);
}
},
created: function() {}
};
</script> <style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
} ul,
li {
list-style: none;
}
</style>

vue+axios安装的更多相关文章

  1. vue axios数据请求get、post方法的使用

    我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入 ...

  2. VUE的安装与Django之间打通数据

    一  VUE的安装与项目创建 1.1.安装nodeJS 官网下载安装:https://nodejs.org/zh-cn/ 1.2.安装脚手架 vue官网 => 学习 => 教程 => ...

  3. vue axios 应用

    vue安装axios cnpm install axios 安装成功后/项目/node_modules/目录下有axios文件夹 在package.json文件中devDependencies字段中添 ...

  4. vue axios 总结篇

    1.npm --save 和 --save-dev 有什么区别 发布到线上的叫生产环境~,在本地开发的时候叫开发环境,--save就是会打包到线上去并且在线上环境能用到的,比如你npm install ...

  5. vue的安装配置与项目创建

    1,安装vue必须先安装node.js.  --------去官网安装node.js 因为npm依赖node.js环境,使用npm的时候需要安装node.js.安装node.js的时候npm会默认安装 ...

  6. 10.2 Vue 环境安装

     Vue 环境安装 环境准备  nodejs 下载安装  https://nodejs.org/en/ 查看下载版本 C:\>node -v v7.6.0 C:\>npm -v 4.1.2 ...

  7. vue axios 取消上次请求

    axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...

  8. VUE项目安装

    连接转载:https://www.cnblogs.com/Colwill-Blog/p/6682091.html 刚刚开始学习Vue.js.今天分享一下我的Vue项目安装过程. 我是windows系统 ...

  9. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

随机推荐

  1. 在VMware下安装CentOS 7.6

    转载自https://blog.51cto.com/hnyuanzijian/2343716?appinstall=0a.点击左上角文件,新建虚拟机,选择典型安装,并下一步   b.选择稍后安装操作系 ...

  2. os::commit_memory(0x0000000085330000, 2060255232, 0) failed; error='Cannot allocate memory' (errno=12)

    centos 安装 elasticsearch的时候 因为 elasticsearch默认 需要 2G内存导致的镜像不能运行 解决方案 修改配置文件 find / -name jvm.options ...

  3. AngularJS中transclude用法详解

    这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...

  4. LVS+Nginx(LVS + Keepalived + Nginx安装及配置)

    (也可以每个nginx都挂在上所有的应用服务器)  nginx大家都在用,估计也很熟悉了,在做负载均衡时很好用,安装简单.配置简单.相关材料也特别多. lvs是国内的章文嵩博士的大作,比nginx被广 ...

  5. maven打包忽略test文件夹

    当在项目中的test中写了单元测试后,在mvn install打包时会自动进行所有单元测试,所以这时需要忽略test文件夹 有两种方法: 1.用命令的方式:mvn install -Dmaven.te ...

  6. 题解【洛谷P1433】吃奶酪

    题面 看到数据范围那么小,一眼状压\(\text{DP}\). 设\(dp[i][s]\)表示从\(i\)出发,走过的点的集合为\(s\)的最小距离. 不难推出转移方程(\(dis(i,j)\)为\( ...

  7. vector 牛逼 +lower_bound+ upper_bound

    vector 超级 日白 解决的问题空间问题,可以自由伸缩. 一下用法: 向量大小: vec.size(); 向量判空: vec.empty(); 末尾添加元素: vec.push_back(); / ...

  8. [CF]Round514

    A Cashier 题意:一个人,一天的工作时长为\(L\),从第\(t_i\)时刻开始有长度为\(l_i\)的工作,他想在工作间隙抽烟,抽一根要\(a\)分钟,问能抽几根. 直接模拟. B Forg ...

  9. 第五篇,理解JS模块化编程思想

    模块化编程 ·模块化编程是一种处理复杂系统分解成更好的可管理模块的方式,它可以把系统代码划分为职责单一高度解耦切可替代的模块. ·系统中某一部分的变化将如何影响其他部分就会变得显而易见,系统的可维护性 ...

  10. Python_面向对象进阶

    isinstance和issubclass isinstance(obj,cls)检查是否obj是否是类 cls 的对象 class Foo(object): pass obj = Foo() isi ...