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 对表格的行和列都能加亮显示
Dec 26 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
JS打印组合功能
Aug 04 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 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
239军机修复记
2021/03/02 无线电
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
web页面数据展示新想法(json)
2010/06/08 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
17个Python小技巧分享
2015/01/23 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
windows下ipython的安装与使用详解
2016/10/20 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
带你认识Django
2019/01/15 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
如何用Python绘制3D柱形图
2020/09/16 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
介绍一下write命令
2014/08/10 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
运动会通讯稿100字
2014/01/31 职场文书
爱情保证书范文
2014/02/01 职场文书
员工合理化建议书
2014/05/19 职场文书
公积金接收函格式
2015/01/30 职场文书
目标责任书格式范文
2015/05/11 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
使用MybatisPlus打印sql语句
2022/04/22 SQL Server