1.元件的js寫法

export default {
  name: "TP300", //元件的名稱
  data() {
    return {
      keys: "",
      light: "",
      deep: "",
      flagRange: "",
      flag: "",
      showopa: "",
      hideopa: "",
      currentSpan: "",
      SnNum: "",
      listItems: [],
      title: "",
      rangeList: []
    };
  },
  mounted: function() {
    this.$http.get("../../static/data.json").then(response => {
      console.log(response);
      this.keys = response.data.keys; //資料位置
      this.light = response.data.light; //資料位置
      this.deep = response.data.deep; //資料位置
      this.flagRange = response.data.flagRange; //資料位置
      this.flag = response.data.flag; //資料位置
      this.showopa = response.data.showopa; //資料位置
      this.hideopa = response.data.hideopa; //資料位置
      this.currentSpan = response.data.currentSpan; //資料位置
      this.SnNum = response.data.SnNum; //資料位置
      this.listItems = response.data.listItems; //資料位置
      this.title = response.data.title; //資料位置
      this.rangeList = response.data.rangeList; //資料位置
    });
  }
  }
};
 

此處的mounted函式可以替換為created，影響並不是很大。

2.入口檔案main.js

import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'
Vue.use(VueResource);
import router from './router/index.js'
import './assets/css/main.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
 

{
        "keys": "",
        "light": "已完成",
        "deep": "#41b883",
        "flagRange": 0,
        "flag": 1,
        "showopa": "1",
        "hideopa": "0.1",
        "currentSpan": "",
        "SnNum": 20,
        "listItems": [
            {
                "lable": "",
                "box": [
                    {
                        "tag": "",
                        "Sn": [
                            {
                                "name": "",
                                "status": "",
                                "duty": ""
                            },
                            {
                                "name": "",
                                "status": "",
                                "duty": ""
                            }
                        ]
                    },
                    {
                        "tag": "",
                        "Sn": [
                            {
                                "name": "",
                                "status": "",
                                "duty": ""
                            },
                            {
                                "name": "",
                                "status": "",
                                "duty": ""
                            }
                        ]
                    }
                ]
            },
            {
                "lable": "",
                "box": [
                    {
                        "tag": "",
                        "Sn": [
                            {
                                "name": "",
                                "status": "",
                                "duty": ""
                            },
                            {
                                "name": "",
                                "status": "",
                                "duty": ""
                            },
                            {
                                "name": "",
                                "status": "",
                                "duty": ""
                            }
                        ]
                    }
                ]
            }
        ],
        "title": "",
        "rangeList": [
            {
                "name": "",
                "percent": ""
            },
            {
                "name": "",
                "percent": ""
            },
            {
                "name": "",
                "percent": ""
            }
        ]
    }
 

4.總結

        要呼叫後臺、資料，需引入vue-resource，此處可使用npm工具，進行安裝，

       4.1、安裝vue-resource到專案中，找到當前專案

                輸入：npm install vue-resource --save

       4.2、安裝完畢後，在main.js中匯入，如下所示：

               import  VueResource  from 'vue-resource'

               Vue.use(VueResource) 

       4.3、我也不知道為什麼我第一次引入的時候，將

Vue.use(VueResource);

這句程式碼放到了main.js的最後，導致報錯：Cannot read property 'get' of undefined"

正確的方法是放到

vue例項：

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

的前面