vue利用axios来完成数据的交互


Posted in Javascript onMarch 23, 2018

axios基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用

现在Vue官方推荐的网络通信库不再是vue-resource了,推荐使用axios。所以学习了下,总结如下。

一、功能特性

1、在浏览器中发送 XMLHttpRequests 请求
2、在 node.js 中发送 http请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、自动转换 JSON 数据
7、客户端支持保护安全免受 XSRF 攻击

二、axios的安装方法(官方给了3种方法)

1、npm安装

$ npm install axios

2、bower安装

$ bower install axios

3、直接使用cdn

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

三、安装步骤

这里我使用npm的方法步骤:

①首先在npm中输入npm install axios

②在main.js加上配置

import axios from ‘axios' 
Vue.prototype.$http = axios

vue利用axios来完成数据的交互

四、请求实例

点击获取数据可以取到想要的数据

<template>
 <div class="tabbar">
  <p>首页</p>
  <button v-on:click = 'goback'>获取数据</button>
  <div class="new_wrap" v-for="items in item">
   <div class="newcard">
    <div>
      <p>{{items.issuer_nickname}}.</p>
    </div>
    <div>
      {{items.title}}
    </div>
    <div class="pic">
      <img :src="items.cover">
    </div> 
   </div>
   <br>
   </div>
 </div>
</template>
<script>
export default {
 name: 'tabbar',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App',
   item: []
  }
 },
 methods:{
  goback:function(){
   console.log('hah');
   this.$http.get('url') //把url地址换成你的接口地址即可
    .then(res => {
     //this.request.response = res.data
     this.item = res.data.data.item; //把取item的数据赋给 item: []中
     console.log(res.data.data.item);
     if (res.data.code == '0') {
      console.log('haha');
     }else{
      alert('数据不存在');
     }
    })
    .catch(err => {
     alert('请求失败');
    })
  }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
*{margin: 0;padding: 0;}
@function torem($px){//$px为需要转换的字号
  @return $px / 100px * 1rem; //100px为根字体大小
}
ul{
 width: 100%;
 position: absolute;
 bottom: 0;
 li{
  width: torem(187.5px);
  float:left;
  height: torem(98px);
  text-align:center;
  background: #ccc;
  }
}
img{
   width: torem(200px);
   height: torem(200px);
  }
</style>

效果图:

vue利用axios来完成数据的交互

参考网址:https://github.com/axios/axios

总结

以上所述是小编给大家介绍的vue利用axios来完成数据的交互,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
javascript插入样式实现代码
Feb 22 Javascript
js打开新窗口方法整理
Feb 17 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
原生实现一个react-redux的代码示例
Jun 08 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
JS动画定时器知识总结
Mar 23 #Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 #Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 #Javascript
浅谈Webpack 持久化缓存实践
Mar 22 #Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 #Javascript
Java设计中的Builder模式的介绍
Mar 22 #Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 #Javascript
You might like
法压式咖啡之制作法
2021/03/03 冲泡冲煮
探寻PHP脚本不报错的原因
2014/06/12 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
Python字符串匹配算法KMP实例
2015/07/18 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
python实现视频分帧效果
2019/05/31 Python
Python进度条的制作代码实例
2019/08/31 Python
django框架两个使用模板实例
2019/12/11 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
财务出纳员岗位职责
2013/11/26 职场文书
年终考核评语
2014/01/19 职场文书
通信研究生自荐信
2014/02/01 职场文书
眼镜促销方案
2014/03/15 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
对孩子的寄语
2014/04/09 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
宣传标语大全
2014/07/01 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
同学会演讲稿
2019/04/02 职场文书
python APScheduler执行定时任务介绍
2022/04/19 Python