vue.js獲取數(shù)據(jù)庫(kù)數(shù)據(jù)實(shí)例代碼
更新時(shí)間：2017年05月26日 09:56:56 作者：YIDBoy
本篇文章主要介紹了vue.js獲取數(shù)據(jù)庫(kù)數(shù)據(jù)實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
vue.js動(dòng)態(tài)獲取數(shù)據(jù)庫(kù)數(shù)據(jù)
(通過(guò)vue.cli和webpack搭建的環(huán)境)
1.首先我先在創(chuàng)建一個(gè)靜態(tài)的data.json文件，在static下創(chuàng)建json文件夾，(webpack環(huán)境下，靜態(tài)的文件放在static目錄下)
{
"data":[
{"id":1,"name": "yidong", "age": "11" },
{"id":2,"name": "yidong2", "age": "12" },
{"id":3,"name": "yidong3", "age": "13" },
{"id":4,"name": "yidong4", "age": "14" },
{"id":5,"name": "yidong5", "age": "15" },
{"id":6,"name": "yidong6", "age": "16" },
{"id":7,"name": "yidong7", "age": "17" }
]
}
1.這里需要用到vue-resource,在我們的項(xiàng)目里面安裝：
nam install vue-ressource --save-dev
2.在main.js中引用vie-resource
import VueResource from 'vue-resource'; Vue.use(VueResource)
3.代碼寫(xiě)在 Home.vue組件下:
export default{
data(){
return {
user:null,
}
},
created () {
this.fetchData()
},
watch:{
'$route':'fetchData'
},
methods:{
fetchData(){ this.$http.get('./../../static/json/data.json').then((response)=>{
console.log(response.data.data);
})
}
}
}
這樣我們就可以用vue.js獲取到從后臺(tái)得到的數(shù)據(jù)json數(shù)據(jù)了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ToB項(xiàng)目如何沉淀業(yè)務(wù)公共組件示例詳解
這篇文章主要為大家介紹了ToB項(xiàng)目如何沉淀業(yè)務(wù)公共組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了Vue SPA首屏加載緩慢問(wèn)題解決方案，首屏?xí)r間（First Contentful Paint），指的是瀏覽器從響應(yīng)用戶(hù)輸入網(wǎng)址地址，到首屏內(nèi)容渲染完成的時(shí)間，此時(shí)整個(gè)網(wǎng)頁(yè)不一定要全部渲染完成，但需要展示當(dāng)前視窗需要的內(nèi)容2023-03-03
Vue利用高德地圖API實(shí)現(xiàn)實(shí)時(shí)天氣
這篇文章主要為大家詳細(xì)介紹了Vue如何利用高德地圖API實(shí)現(xiàn)實(shí)時(shí)天氣,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
vue和js中實(shí)現(xiàn)模糊查詢(xún)方式
這篇文章主要介紹了vue和js中實(shí)現(xiàn)模糊查詢(xún)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。也希望大家多多支持腳本之家2022-08-08
解決router.beforeEach()動(dòng)態(tài)加載路由出現(xiàn)死循環(huán)問(wèn)題
這篇文章主要介紹了解決router.beforeEach()動(dòng)態(tài)加載路由出現(xiàn)死循環(huán)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式
這篇文章主要介紹了antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue使用element-ui實(shí)現(xiàn)菜單導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了Vue使用element-ui實(shí)現(xiàn)菜單導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue中如何使用echarts和echarts-gl實(shí)現(xiàn)3D餅圖環(huán)形餅圖
現(xiàn)在vue是很多公司前端的主流框架,我目前所在公司接觸的項(xiàng)目也都是使用vue來(lái)實(shí)現(xiàn)的,很少有完全使用原生的JavaScript來(lái)寫(xiě)項(xiàng)目的了,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用echarts和echarts-gl實(shí)現(xiàn)3D餅圖環(huán)形餅圖的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue 圖片上傳功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Vue?展示.md文件的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05