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