Heim > Web-Frontend > js-Tutorial > Code-Sharing darüber, wie vue.js Datenbankdaten erhält

Code-Sharing darüber, wie vue.js Datenbankdaten erhält

黄舟
Freigeben: 2017-05-26 10:03:46
Original
2635 Leute haben es durchsucht

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 data.json-Datei 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" }
  ]
}
Nach dem Login kopieren

1. Sie müssen vue-resource hier verwenden und installieren in unserem Projekt:

nam install vue-ressource --save-dev
Nach dem Login kopieren

2 🎜> in 🎜>main.js-Referenzen vie-resource

3. Der Code wird unter der Home.vue-Komponente geschrieben:
import VueResource from 'vue-resource';
Vue.use(VueResource)
Nach dem Login kopieren

This So 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);
        })
      }
    }
  }
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonCode-Sharing darüber, wie vue.js Datenbankdaten erhält. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage