Beispielcode zum Abrufen von Datenbankdaten mit vue.js

Dieser Artikel stellt hauptsächlich den vue.js-Beispielcode zum Abrufen von Datenbankdaten vor. Jetzt werde ich ihn mit Ihnen teilen und als Referenz geben. Folgen wir dem Editor, um einen Blick darauf zu werfen

vue.js ruft dynamisch Datenbankdaten ab

(Umgebung erstellt über vue.cli und Webpack)

1 erstellt eine statische Datendateijson und erstellt einen JSON-Ordner unter statisch (in einer Webpack-Umgebung werden statische Dateien im statischen Verzeichnis abgelegt)

{
  "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. Sie müssen vue-Ressource hier verwenden und in unserem Projekt installieren:

nam install vue-ressource --save-dev

In in 🎜>main.js-Referenzen vie-resource 3. Der Code wird unter der Home.vue-Komponente geschrieben:

import VueResource from 'vue-resource';
Vue.use(VueResource)

Auf diese Weise können wir vue.js verwenden, um die aus dem Hintergrund erhaltenen JSON-Daten abzurufen.

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);
        })
      }
    }
  }

Das obige ist der detaillierte Inhalt vonBeispielcode zum Abrufen von Datenbankdaten mit vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!