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数据了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。