vue數據請求

一、使用vue-resource模塊請求數據，官方不在更新

1、在終端上執行  $ cnpm install --save vue-resource   下載 vue-resource 模塊

2、

import VueResource from 'vue-resource'    // 導入vue-resource模塊

 

3、

Vue.use(VueResource)        //使用模塊

 

4、發起網路請求的代碼放在鈎子函數中

     

export default {
             name: "global",
             data () {
                   return {
                           // 請求的地址
                           url:"./././static/******.json"，

                           // 建立一個數組去接受請求回來的數據，方便使用
                           list:[],
                   };
              },


            // 在鈎子函數中發起請求
            created(){
                         this.$http.get(this.url).then(res=>{
                                        // 在控制台中打印出請求的數據
                                        console.log(res.data);
                                        //創建的數組去承載請求回來的數據
                                        this.list = res.data.**;
                              },err=>{
                                     console.log(err);
                         });
             }
      }

 

二、使用axios去請求數據，非官方提供的，建議使用

1、$ cnpm install --save axios 下載axios模塊

 

2、/導入axios模塊

           

   import axios from 'axios'   //導入模塊

 

3、注冊axios,由於axios是非官方的模塊無法使用Vue.use()方法來注冊，只能在原型上注冊

     

     Vue.prototype.axios =axios   //在原型鏈上增加屬性后面才可以使用
     export default {
              name: "global",
             data () {
                   return {
                           // 請求的地址
                           url:"./././static/******.json"，
                          // 建立一個數組去接受請求回來的數據，方便使用
                           list:[],
                   };
              },
            // 在鈎子函數中發起請求
            created(){
                         this.axios.get(this.url).then(res=>{
                                       //  在控制台中打印出請求的數據 
                                        console.log(res.data);
                                       // 創建的數組去承載請求回來的數據
                                        this.list = res.data.**;
                              },err=>{
                                     console.log(err);
                         });
             }
      }