vue-请求数据 :1) vue-resource请求数据(官方:推荐) 2) axios请求数据（第三方），具体使用方法可去github上查阅

 

 

一、vue-resource(官方)

1、安装  https://github.com/pagekit/vue-resource

   cnpm install vue-resource --save

2、引入

  

 

 

 

 

 

 3、总结

 

 

 4、写法：

<button @click="getData()">请求数据</button>
<br>
<hr>
<ul>
  <li v-for="item in list">
    {{item.title}}
  </li>
</ul>

定义list:[]

getData(){
  var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
  //写法一
  // this.$http.get(api).then(
  //   function (response) {
  //     console.log(response);
  //
  // },function (err) {
  //     console.log(err)
  // }
  // );
  //写法二
  this.$http.get(api).then(
 (response)=>{
      console.log(response);
      //注意this指向
      this.list=response.body.result;

    },function (err) {
      console.log(err);
    }
  );

}，mounted() {

    this.getData();
}

二、axios(第三方)

 

 

 

 

 

 

var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';

Axios.get(api).then((response)=>{
  this.list=response.data.result;
}).catch( (err)=> {
console.log(err)
});