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 模拟气泡屏保效果代码
Jul 10 Javascript
jquery实现pager控件示例
Apr 09 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
Vuex入门到上手教程
Jun 20 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
vue实现tab栏点击高亮效果
Aug 19 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
一个简洁的多级别论坛
2006/10/09 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
jquery里的each使用方法详解
2010/12/22 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
Python 第一步 hello world
2009/09/25 Python
gearman的安装启动及python API使用实例
2014/07/08 Python
Python每天必学之bytes字节
2016/01/28 Python
python的文件操作方法汇总
2017/11/10 Python
Python实现学生成绩管理系统
2020/04/05 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
知识竞赛主持词
2014/03/26 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
邀请函样本
2015/02/02 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书