十一、Vue之请求数据

• vue-resource
• axios
• fetch-jsonp

一、vue-resource插件请求数据

（一）安装vue-resource插件

备注：在安装组件时，一定要加上 --save ，这样该组件才会出现在 package.json 中，这样别人拿到把你的项目才能正确的把依赖下载完毕，才能成功运行项目！

cnpm install vue-resource --save

（二）main.js 引入 并应用vue-resource

import VueResource from 'vue-resource';

Vue.use(VueResource);

（三）在组建里使用 vue-resource 语法请求数据

<script>
import Head from './Head.vue';
import Life from './Life.vue';
export default {
    data() {
        return {
            msg: '我是一个组件',
            flag: true,
            list: []
        }
    },
    methods: {
        run() {
            alert(this.msg);
        },
        getData() {
            var url = "https://api.douban.com/v2/movie/top250";
            
            // 使用 vue-resource 请求数据
            this.$http.get(url).then((response) => {
                console.log(response);
                this.list = response.body.result;
                console.log(list);
            }, function(err){
                console.log(err);
            });
        }, function(err){
                console.log(err);
            });
        }
    },
    components: {
        "v-head": Head,
        "v-life": Life
    },
    // 页面刷新时请求数据
    mounted() {
        this.getData();
    }
}
</script>

二、axios插件请求数据

1.安装axios插件

cnpm install axios --save

2.哪里用哪里引入axios

axios 和 vue-resource的区别就在于：vue-resource只要一个全局引入，哪里都能用；而 axios哪里用，哪里就需要引入！！

<script>
import Head from './Head.vue';
import Life from './Life.vue';

// 引入 axios
import Axios from 'axios';

export default {
    data() {
        return {
            msg: '我是一个组件',
            flag: true,
            list: []
        }
    },
    methods: {
        run() {
            alert(this.msg);
        },
        getData() {
            var url = "https://api.douban.com/v2/movie/top250";
            
            // 使用axios请求数据
            Axios.get(url).then((response) => {
                console.log(response);
                this.list=response.data.result;
                console.log(this.list);
            }).catch((err) => {
                console.log(err);
            });
        }, function(err){
                console.log(err);
            });
        }
    },
    components: {
        "v-head": Head,
        "v-life": Life
    },
    // 页面刷新时请求数据
    mounted() {
        this.getData();
    }
}
</script>