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數據了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。