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之选择组件的深入解析
Jun 19 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
RequireJS使用注意细节
May 15 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 Javascript
Javascript实现关闭广告效果
Jan 29 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
php实现aes加密类分享
2014/02/16 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
PHP错误处理函数
2016/04/03 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
Python socket编程实例详解
2015/05/27 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
python dataframe NaN处理方式
2019/12/26 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
Python短信轰炸的代码
2020/03/25 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
给分销商的致歉信
2014/01/14 职场文书
简爱电影观后感
2015/06/10 职场文书
十二生肖观后感
2015/06/12 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书