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 相关文章推荐
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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有序表查找之插值查找算法示例
2018/02/10 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
关于js中for in的缺陷浅析
2013/12/02 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
利用python获取Ping结果示例代码
2017/07/06 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
使用python进行拆分大文件的方法
2018/12/10 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
python微信撤回监测代码
2019/04/29 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
编程用JAVA解析XML的方式
2013/07/07 面试题
乡镇党建工作汇报材料
2014/10/27 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
高考学习决心书
2015/02/04 职场文书
2015年班干部工作总结
2015/04/29 职场文书
2015年库房工作总结
2015/04/30 职场文书
mysql查找连续出现n次以上的数字
2022/05/11 MySQL