vue怎么和php交互,vue+axios如何操作数据交互

这次给大家带来vue+axios如何操作数据交互，vue+axios操作数据交互的注意事项有哪些，下面就是实战案例，一起来看一下。

现在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}}

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);

}

效果图：

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：