vue网络请求 vue网络请求

一、使用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);

【vue网络请求】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. 安装cnpminstallaxios --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); })