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 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
在html页面中包含共享页面的方法
Oct 24 Javascript
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
Node.js Express安装与使用教程
May 11 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 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
Jquery ui css framework
2010/06/28 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
innerText 使用示例
2014/01/23 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
python基础教程之循环介绍
2014/08/29 Python
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
Django后台admin的使用详解
2019/07/08 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
python双向链表原理与实现方法详解
2019/12/03 Python
Python递归实现打印多重列表代码
2020/02/27 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
解决pip install psycopg2出错问题
2020/07/09 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
人事专员的岗位职责
2014/03/01 职场文书
模特大赛策划方案
2014/05/28 职场文书
八项规定整改方案
2014/10/01 职场文书
六年级学生期末评语
2014/12/26 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫