个人练习----Vue中使用vue-resource请求数据【如有不对，欢迎指正】

一，安装 vue-resource ( 官方的插件 )
1，cd 到项目的目录
2，安装 npm install vue-resource --save
注意：( --save 是写入到package.json，如果不写是不会写入到 pachsge.json )
3，在 main.js 中引入import vueResource from 'vue-resource'; （ 后面vue-resource 必须和模块的名字 一样，前面的可以随便起名字，后面的赋给前面的 vueResource ， ）
4，使用 Vue.use(vueResource);调用这个插件，官方的插件都这么用。

二，

<template>
    <!-- 所有的内容要被根节点包含 -->
    <div>
        <button @click="getData()">请求数据</button>
        <hr>
        <ul>
            <li v-for="(item, key) in list" :key="key">
                <p>{{ item.theme_id }}</p>
                <p>{{ item.screen_name }}</p>
                <p>{{ item.text }}</p>
                <p>{{ item.theme_name }}</p>
                <img :src="item.imgSrc" alt="">
            </li>
            <hr>  
        </ul>
    </div>
</template>



<script>
    /* 
        vue请求数据的模板

        vue-resource

        axios

        fetch-jsonp
    */
    export default {
        data() {
            return {
                flag:false,
                imgSrc:'',
                list:[]
            }
        },
        methods: {
            getData(){
                var api = 'https://www.apiopen.top/satinApi?type=1&page=1'
                this.$http.get(api).then((res)=>{
                    console.log(res);
                    this.list = res.body.data;
                    for( var i = 0; i < this.list.length; i++){
                        this.list[i].imgSrc = res.body.data[i].image0;
                    }    
                },(err)=>{
                    console.log(err);
                })
            }
        },
        mounted() {
            this.getData();
        },
    }
</script>

获取后台数据要使用 res.body.data;
如有图片需要 for 循环一下