Vue.js学习（10）-Vue.js通过Http请求数据 axios/fetch-json

1.axios使用步骤

初始化，引用，使用

https://github.com/axios/axios

npm install axios --save

2.通过axios请求数据实例

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

<script>
  import Axios from "axios";

    export default {
        name: "Home",
      data(){
          return{
            msg:"Home.vue是一个首页组件",
            list:[],
          }
      },
      methods:{
          getData(){
        var api = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
      
            Axios.get(api)
              .then(function (response) {
                // handle success
                console.log(response);
                this.list = response.data.result;
              })
              .catch(function (error) {
                // handle error
                console.log(error);
              })
              .then(function () {
                // always executed
              });

          }
      },
      mounted(){
       this.getData();
      },
    
    }
</script>

3.fetch-json

fetch-json可以支持jsonp格式，axios是不支持jsonp格式的，而vue-resource更新作为官方应用一直在持续优化更新，建议是哟欧诺个vue-resource。fetch-json和axios的使用完全一致，如需使用请参考axios。

jsonp:JSON with Padding,跨域读取数据，