數據請求的方式
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);
})