vue.js获取数据库数据实例代码
2017-05-26 09:56
1041 查看
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,在我们的项目里面安装:
nam install vue-ressource --save-dev
2.在main.js中引用vie-resource
import VueResource from 'vue-resource'; Vue.use(VueResource)
3.代码写在 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获取到从后台得到的数据json数据了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 从数据库获取到json数据,前端用vue.js数据绑定
- vue2.5.2使用http请求获取静态json数据的实例代码
- vue.js获取数据库数据
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
- JS通过ajax方式从数据库动态获取数据的代码
- JS操作数据库的实例代码
- 百度统计中js获取SEO数据的代码
- ajax 异步获取数据实现代码 (js创建ajax对象)
- JS操作数据库的实例代码
- js获取location.href的参数实例代码
- js获取url参数代码实例分享(JS操作URL)
- js获取url参数代码实例分享(JS操作URL)
- JS操作数据库的实例代码
- jsp连接各种数据库代码及读取数据实例
- JS获取键盘上任意按键的值(实例代码)
- ajax从数据库获取数据的代码
- 牛腩购物9 用户表设计/动软生成器/金钱字段decimal(18, 2)/ 注册的时候的前台js判断/后台代码判断/正则表达式软件/RegexBuddy/设置数据库字段的唯一性约束/如何获取控件在前台html的id值/如何将C#的后台正则换成js的正则
- js实时获取系统当前时间实例代码
- JQuery 获取json数据$.getJSON方法的实例代码