溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue.js獲取數(shù)據(jù)庫數(shù)據(jù)實例代碼

發(fā)布時間：2020-10-13 05:13:11 來源：腳本之家 閱讀：217 作者：YIDBoy 欄目：web開發(fā)

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)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手