vue.js獲取數(shù)據(jù)庫(kù)數(shù)據(jù)實(shí)例代碼
更新時(shí)間：2017年05月26日 09:56:56 作者：YIDBoy
本篇文章主要介紹了vue.js獲取數(shù)據(jù)庫(kù)數(shù)據(jù)實(shí)例代碼，小編覺得挺不錯(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.代碼寫在 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)文章
vue watch偵聽器有無(wú)immediate的運(yùn)行順序問題
這篇文章主要介紹了vue watch偵聽器有無(wú)immediate的運(yùn)行順序問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue遞歸獲取父元素的元素實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要介紹了vue如何通過(guò)日期篩選數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家介紹了vue組件prop驗(yàn)證作用示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue電商網(wǎng)站首頁(yè)內(nèi)容吸頂功能實(shí)現(xiàn)過(guò)程
電商網(wǎng)站的首頁(yè)內(nèi)容會(huì)比較多，頁(yè)面比較長(zhǎng)，為了能讓用戶在滾動(dòng)瀏覽內(nèi)容的過(guò)程中都能夠快速的切換到其它分類。需要分類導(dǎo)航一直可見，所以需要一個(gè)吸頂導(dǎo)航的效果。目標(biāo):完成頭部組件吸頂效果的實(shí)現(xiàn)2023-04-04
vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決
這篇文章主要介紹了vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了詳解如何在vue中使用sass，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
uniapp實(shí)現(xiàn)APP、小程序與webview頁(yè)面間通訊的實(shí)現(xiàn)步驟
這篇文章主要介紹了uniapp實(shí)現(xiàn)APP、小程序與webview頁(yè)面間通訊的實(shí)現(xiàn)步驟,在Uniapp開發(fā)的APP或小程序頁(yè)面中嵌入一個(gè)H5網(wǎng)頁(yè),并實(shí)現(xiàn)H5頁(yè)面與APP之間的數(shù)據(jù)傳遞,需要的朋友可以參考下2025-01-01
VUE設(shè)置和清除定時(shí)器的方式及遇到的問題
?最近需要再頁(yè)面里做個(gè)倒計(jì)時(shí),發(fā)現(xiàn)用clearInterval()清除定時(shí)器失效,下面這篇文章主要給大家介紹了關(guān)于VUE設(shè)置和清除定時(shí)器的方式及遇到的問題的相關(guān)資料,需要的朋友可以參考下2022-10-10
在vue中會(huì)將常用的組件進(jìn)行封裝,下面這篇文章主要給大家介紹了關(guān)于Vue組件封裝之input輸入框的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10