这次给大家带来vue+axios实现数据交互，vue+axios实现数据交互的注意事项有哪些，下面就是实战案例，一起来看一下。
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
登录后复制
三、安装步骤
这里我使用npm的方法步骤：
①首先在npm中输入npm install axios
②在main.js加上配置
import axios from ‘axios' Vue.prototype.$http = axios
登录后复制
四、请求实例
点击获取数据可以取到想要的数据
首页
{{items.issuer_nickname}}.
{{items.title}}
![vue+axios实现数据交互]()
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('请求失败'); }) } }}*{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); }
登录后复制
效果图：
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
JS怎么储存原始值与引用值
JS用正则判断出生日期
以上就是vue+axios实现数据交互的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2763397.html
