この記事では、vue.jsでデータベースのデータを取得するサンプルコードを中心に紹介します。エディターに従って見てみましょう
vue.js はデータベース データを動的に取得します (vue.cli と webpack によって構築された環境)1. まず、staticdata.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" } ] }
resource を使用する必要があります:
nam install vue-ressource --save-dev
import VueResource from 'vue-resource'; Vue.use(VueResource)
main.js3. コードは 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 がデータベース データを取得する方法に関するコード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。