vue.js获取数据库数据实例代码
vue.js动态获取数据库数据
(通过vue.cli和webpack搭建的环境)
1.首先我先在创建一个静态的data.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"}
]
}
1.这里需要用到vue-resource,在我们的项目里面安装：
naminstallvue-ressource--save-dev
2.在main.js中引用vie-resource
importVueResourcefrom'vue-resource'; Vue.use(VueResource)
3.代码写在Home.vue组件下:
exportdefault{
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获取到从后台得到的数据json数据了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。