一 創建測試項目

vue init webpack-simple vuedemo

二 進入demo目錄

cd vuedemo

三 安裝依賴

cnpm install

四 安裝vue-resource

//從包管理下載vue-resource包，并更新到項目的package.json里
cnpm install vue-resource --save

五 修改代碼

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

App.vue

<template>
  <div id="app">
<v-home></v-home>
<hr>
  </div>
</template>

<script>
/*
import components
Local Registration components
use in template
*/

import Home from './components/Home.vue';

export default {
  name: "app",
  data() {
    return {
      msg:'hello vue world!',     
    };
  },
  components:{
    'v-home':Home
  }
};
</script>

<style>

</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>

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

            this.$http.get(api).then((response)=>{
                console.log(response)

                this.list=response.body;

            }, function(err){
                console.log(err)
            })
        }
    },
    mounted(){
        this.getData()
    }

}
</script>

<style>

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

main.js

import Vue from 'vue'
import App from './App.vue'

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

new Vue({
  el: '#app',
  render: h => h(App)
})

六 運行

npm run dev

image.png

七 總結

1 了解js網絡庫vue-resource的使用，還有其他備選axios，fecth-jsonp
《1 安裝vue-resource
cnpm install vue-resource --save

《2 導入vue-resource
main.js
import VueResource from 'vue-resource'
Vue.use(VueResource)

《3 使用vue-resource
thos.$http.get(url).then((response)=>{

},function(err){

})

2 批量假的json的api，及批量生成假json數據方法。其他工具還有yapi swagger

八 參考

https://github.com/pagekit/vue-resource vue-resource代碼庫
https://jsonplaceholder.typicode.com/ 假的json數據api提供網站
https://fakejson.com/ 假的json數據生成網站