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 相关文章推荐
javascript中的作用域scope介绍
Dec 28 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
鸿蒙系统中的 JS 开发框架
Sep 18 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
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
详解js 创建对象的几种方法
2019/03/08 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
python基于multiprocessing的多进程创建方法
2015/06/04 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
python列表的增删改查实例代码
2018/01/30 Python
python监控文件并且发送告警邮件
2018/06/21 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
离婚起诉书范本
2015/05/18 职场文书
新年寄语2016
2015/08/17 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python