Vue axios请求数据与vue-resource请求数据有所不同
步骤如下:
1.安装 npm install axios --save / npm install --save axios
2、哪里用哪里引入axios (与vue-resource有所不同,vue_resource在main.js 中引入便可以全局使用)
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">首页组件
<button @click="getData()">请求数据</button>
<hr>
<br>
<ul>
<li v-for="item in list">
<!--将数据循环输出-->
{{item.title}}
</li>
</ul>
</div>
</template>
<script>
/*
请求数据的模板
axios的使用
1、安装 cnpm install axios --save
2、哪里用哪里引入axios (与vue-resource有所不同)
*/
import Axios from 'axios';
export default{
data(){
return {
msg:'我是一个首页组件msg',
list:[]
}
},
methods:{
getData(){
//请求数据
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';//定义好的一个数据
//如下为语法格式,可详见官方文档
Axios.get(api).then((response)=>{
console.log(response); //观察控制台它的数据是在哪个部分
this.list=response.data.result; //用list接收这个数据
}).catch((error)=>{ //接收错误
console.log(error);
})
}
},
mounted(){ /*生命周期函数*/
this.getData(); // 当页面刷新时自动加载数据
}
}
</script>
<style>
</style>
运行结果:
以上就是axios请求数据,若有任何疑问或是不解,请在下方评论,谢谢。