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 相关文章推荐
angularJS 中$scope方法使用指南
Feb 09 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
js面向对象的写法
Feb 19 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
AngularJS 事件发布机制
Aug 28 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
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
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
python并发编程之线程实例解析
2017/12/27 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
村委会主任先进事迹
2014/01/15 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
求职意向书
2014/04/01 职场文书
云台山导游词
2015/02/03 职场文书
慰问信范文
2015/02/14 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL