Javascript - Vue - webpack中的axios

導入axios

import Vue from "vue";
import axios from "axios";
import { get } from "http";
Vue.prototype.$ajax = axios; //將axios綁定到vue的原型上

調用axios

在vue對象內部的metho中調用

this.$ajax.get("http://localhost:3000/src/json/bannerBoxImg.json") .then(function (response) {
        self.dataList = response.data;
});

兩種json文件的讀取方法

第一種

[
      {
            "name":"ajax", //json文件中屬性必須用雙引號包含起來，不能用單引號
            "header":"/src/img/h3.png",
            "email":"@29384_shlm",
            "content":"xxx"
      },
      {
            "name":"relex",
            "header":"/src/img/h2.png",
            "email":"@gukola",
            "content":"xxx"
      },
      {
            "name":"saxphone",
            "header":"/src/img/h1.png",
            "email":"@mogwai",
            "content":"xxx"
      },
      {
            "name":"jazz",
            "header":"/src/img/h4.png",
            "email":"@wxports",
            "content":"xxx"
      }
]

讀取

this.$ajax.get("http://localhost:3000/src/json/news.json",{}).then(function (response) {
      self.newsList=response.data
})

第二種

{
      "newsList": [
            {
                  "name": "ajax",
                  "header": "/src/img/h3.png",
                  "email": "@29384_shlm",
                  "content": "xxx"
            },
            {
                  "name": "relex",
                  "header": "/src/img/h2.png",
                  "email": "@gukola",
                  "content": "xxx"
            },
            {
                  "name": "saxphone",
                  "header": "/src/img/h1.png",
                  "email": "@mogwai",
                  "content": "xxx"
            },
            {
                  "name": "jazz",
                  "header": "/src/img/h4.png",
                  "email": "@wxports",
                  "content": "xxx"
            }
      ]
}

讀取

this.$ajax.get("http://localhost:3000/src/json/news.json",{}).then(function (response) {
      self.newsList=JSON.parse(JSON.stringify(response.data))['newsList']
})

　

Javascript - 學習總目錄