一、使用vue官方的vue-resource 插件請求數據
1.安裝vue-resource :
cnpm install vue-resource --save
//說明:帶--save 或 -S 意思是將其寫入到package.json文件中,供拷貝代碼后添加使用
2.在main.js中引入vue-resource
import VueResource from 'vue-resource';
Vue.use(VueResource);
3.在組件中直接使用:
methods:{
getListData(){//網絡請求數據
var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
//jsonp請求,需要后臺接口支持jsonp
// this.$http.jsonp(api).then((response)=>{
//get請求
this.$http.get(url).then((response)=>{
console.log("請求到的數據:"+response);
this.list = response.body.result;
},(error)=>{
console.log("請求錯誤:"+error);
})
},
},
mounted(){//模板已經編譯 -- 執行請求數據的操作
this.getListData();
}
二、使用vue官方的axios 插件請求數據
1. 安裝 cnpm install axios --save
2.每一個地方使用網絡請求,就在那個地方引入axios,然后直接用就行
import Axios from 'axios';
3.使用
var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
Axios.get(url).then((response)=>{
this.msglist=response.data.result;
console.log("請求到的數據66666:"+response);
}).catch((error)=>{
console.log(error);
})