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 🎜>main.js-Referenzen vie-resource
3. Der Code wird unter der Home.vue-Komponente geschrieben:import VueResource from 'vue-resource'; Vue.use(VueResource)
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!
