3.vue要求データ

データを要求する方法:

vue-resource公式提供vueのプラグイン

axios

fetch-jsonp

vue-resourceの使用
使用手順:1、vue-resourceモジュールの取り付け

cnpm install vue-resource --save  

2.main.jsにvue-resourceを導入する

import VueResource from 'vue-resource';
Vue.use(VueResource);

3、コンポーネントの中で直接使う

this.$http.get(  ).then(function(){

})

例:Info.vue

    export default {
        name: "Info",
        data() {
            return {
                list: []
            }
        },
        methods: {
            getData: function () {
                let api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
                //          。
                this.$http.get(api).then((res)=>{
                    this.list = res.body.result;
                }, (err)=>{
                    console.log(err);
                });
            }
        },
        mounted() {
            this.getData();
        }
    }

getData()に矢印関数が適用されない場合は、thisの問題に注意する必要があります.

getData: function () {
    let api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
    const _this = this;
    this.$http.get(api).then(function (res) {
        _this.list = res.body.result;
    }, function (err) {
        console.log(err);
    });
}

axiosの使用
axiosはfetch-jsonpと同様にサードパーティプラグイン1、インストール

cnpm  install  axios --save

2、どこでaxiosを導入するか

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

fetch-jsonpの使用
1、インストール

cnpm  install  fetch-jsonp --save

2、どこでaxiosを導入するか

fetchJsonp('/users.jsonp')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })