一 创建测试项目

vue init webpack-simple vuedemo

二 进入demo目录

cd vuedemo

三 安装依赖

cnpm install

四 安装axios

//从包管理下载axios包，并更新到项目的package.json里
cnpm install axios --save

五 修改代码

├── src
│ ├── App.vue
│ ├── components
│ │ └── Home.vue

App.vue

<template>
    <!-- all content need in root-->
    <div id="home">
        <h2>{{msg}}</h2>


        <button @click="getData()">request data</button>
        <hr>
        <br>

        <ul>
            <li v-for='item in list' :key="item.id">
                {{item.website}}
            </li>
        </ul>
    </div>
</template>


<script>


import Axios from 'axios';

export default {
    data(){
        return {
            msg:'i am home component!',
            list:[]
        }
    },
    methods: {
        getData(){
            var api='https://jsonplaceholder.typicode.com/users'

            Axios.get(api).then((response)=>{
                console.log(response);

                this.list=response.data;

            }).catch((error)=>{
                console.log(error);
            })
        }
    },
    mounted(){
        this.getData()
    }

}
</script>

<style>

#home h2{
    color: red;
}
</style>

Home.vue

<template>
    <!-- all content need in root-->
    <div id="home">
        <h2>{{msg}}</h2>


        <button @click="getData()">request data</button>
        <hr>
        <br>

        <ul>
            <li v-for='item in list' :key="item.id">
                {{item.website}}
            </li>
        </ul>
    </div>
</template>


<script>


import Axios from 'axios';

export default {
    data(){
        return {
            msg:'i am home component!',
            list:[]
        }
    },
    methods: {
        getData(){
            var api='https://jsonplaceholder.typicode.com/users'

            Axios.get(api).then((response)=>{
                console.log(response);

                this.list=response.data;

            }).catch((error)=>{
                console.log(error);
            })
        }
    },
    mounted(){
        this.getData()
    }

}
</script>

<style>

#home h2{
    color: red;
}
</style>

六 运行

npm run dev

image.png

七 总结

1 了解js网络库vue-resource的使用，还有其他备选axios，fecth-jsonp
《1 安装vue-resource
cnpm install axios --save

《2 导入vue-resource
在Home.vue里面
import Axios from 'axios';

《3 使用vue-resource
Axios.get(api).then((response)=>{
}).catch((error)=>{
console.log(error);
})

八 参考

https://github.com/axios/axios