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 核心函数以及jQuery对象
Mar 23 Javascript
javascript getElementsByTagName
Jan 31 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 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
Zend Guard使用指南及问题处理
2015/01/07 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
详解Vue的七种传值方式
2021/02/08 Vue.js
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
讲解Python中的标识运算符
2015/05/14 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python实现简单银行管理系统
2019/10/25 Python
python实现图像拼接功能
2020/03/23 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
关于建议书的格式范文
2014/05/20 职场文书
爱国口号
2014/06/19 职场文书
房产协议书范本2014
2014/09/30 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书