vue.js動態獲取數據庫數據
(通過vue.cli和webpack搭建的環境)
1.首先我先在創建一個靜態的data.json文件，在static下創建json文件夾，(webpack環境下，靜態的文件放在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獲取到從后臺得到的數據json數據了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
