vue2.0-第三方插件axios请求数据方式
参考：https://github.com/axios/axios
1、安装axios
c:\Users\Administrator\Desktop\vuejs\vuejs\vuedemo>npm install axios --save
查看packages.json文件，查看安装记录。
"dependencies": {
"axios": "^0.18.0",
"element-ui": "^2.4.11",
"vue": "^2.5.2",
"vue-resource": "^1.5.1",
"vue-router": "^3.0.1"
},
2、引用
在组件里面直接引用
import Axios from 'axios';
3、组件配置，
4、源代码
<template>
<div class="hello">
<button @click="getData()">请求数据</button>
<br>
<ul>
<li v-for="(item,index) in list" :key="index">
{{item.title}}
</li>
</ul>
</div>
</template>
<script>
import Axios from 'axios';
export default {
name: 'home-component',
data () {
return {
aaa: '我是一个首页组件',
flag:true,
list:[]
}
},
methods:{
getData(){
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=12&page=1';
Axios.get(api).then((response)=>{
this.list=response.data.result;
}).catch((error)=>{
console.log(error);
})
}
},
mounted(){ /*生命周期函数,mouted-页面加载即可刷新界面*/
this.getData();
}
}
</script>
<style scoped>
h2{
color: red;
}
</style>