vue.js获取数据库数据实例代码


Posted in Javascript onMay 26, 2017

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数据了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
Vue底层实现原理总结
Feb 17 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 Javascript
详解通过JSON数据使用VUE.JS
May 26 #Javascript
JS中去掉array中重复元素的方法
May 26 #Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 #Javascript
AngularJS表单验证功能分析
May 26 #Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 #Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 #Javascript
BootStrap中的Fontawesome 图标
May 25 #Javascript
You might like
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
Python字符串格式化输出代码实例
2019/11/22 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
keras输出预测值和真实值方式
2020/06/27 Python
python判断是空的实例分享
2020/07/06 Python
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
年终自我鉴定
2013/10/09 职场文书
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
后勤部长岗位职责
2013/12/14 职场文书
安全生产检查通报
2014/01/29 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
紧急迫降观后感
2015/06/15 职场文书
同意转租证明
2015/06/24 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python