數據請求的方式

axios

1.安裝:

npm install axios vue-axios -S;

2.作為插件

import Vue from 'vue';
import Axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios,Axios);    //注意順序

3.使用：

this.axios.get("http://localhost/2019/vue_test1/mydata/1.json")
.then((res)=>{
    this.ajaxdata = `姓名：${res.data.name} - 年齡：${res.data.age}`;
}).catch((err)=>{
    console.log(err)
});

vue-source

1.安裝：

npm install vue-router vue -S

2.作為插件

import Vue from 'vue';
import VueResource from 'vue-resource';

Vue.use(VueResource);

3.使用

//通過vue-resource方式獲取數據
this.$http.get("http://localhost/2019/vue_test1/mydata/1.json")
.then((res)=>{
    this.ajaxdata2 = `姓名：${res.data.name} - 年齡：${res.data.age}`;
}).catch((err)=>{
    console.log(err)
});

fetch

1.安裝：
無需安裝

2.作為插件
無需給vue添加插件

3.使用：

fetch("http://localhost/2019/vue_test1/mydata/1.json")
.then((res)=>{
    //轉化格式
    res.json()
    .then((res2)=>{
        this.ajaxdata3 = `姓名：${res2.name} - 年齡：${res2.age}`;    
    })
    .catch((err)=>{
        console.log(err);
    })
})
.catch((err)=>{
    console.log(err);
})