详解通过JSON数据使用VUE.JS


Posted in Javascript onMay 26, 2017

最近接到一个比较简单的项目,不准备使用数据库,打算用JSON数据就可以了。结合当前火热的VUE.JS进行数据渲染。

尽管不打算使用数据库,可是一般的操作增删查改依旧是少不了的。如果使用到数据库的话,不妨做一个API出来,那么网站、APP等都可以依照这个进行操作。在这篇文章里面,我们只是打算简单的引用而已。

下面先来看看我的JSON文件,这里是一个类别文档Category.json:

{
  "msg": "ok",
  "data":[
{
 "ID":"1",
 "name": "地产",
 "Url":"/Category/List/1"
},
{ "ID":"2",
 "name": "科技",
 "Url":"/Category/List/2"},
{ "ID":"3",
 "name": "医药",
 "Url":"/Category/List/3"},
{ "ID":"4",
 "name": "其他",
 "Url":"/Category/List/4"}
]
}

下面我们通过Javascript进行渲染,将数据渲染到导航里面去。这里有两种方式:如果你的项目已经带有JQuery的话,可以参考一下使用下面的代码:

$(function(){ 
    $.ajax({ 
     type:'get', 
     url:'Category.json', 
     success: function(data){ 
      if(data.msg == "ok"){
       pushDom(data.data); 
      }
      else
      { 
       alert("服务器返回异常");
      } }, 
     error: function(data){ 
      alert(JSON.stringify(data));
     } 
    }); 
 function pushDom(data1){ 
  var vm = new Vue({ el: '#app', data: { peps:data1 } });
 }
})

然后到html中,把数据渲染出来

<div id="app" class="inner">
  <ul v-for = "pep in peps ">
    <li><a href="{{pep.Url}}" rel="external nofollow" > {{pep.name}}</a></li>
  </ul>
 </div>

上面的代码是使用JQuery的$.ajax 将json的数据引入,但如果你的项目里面没有使用到JQuery的话,就要使用到vue-resource.js了。

在html中引入:

<script src="/js/vue.js"></script>
<script src="/js/vue-resource.js"></script>

我第一次使用vue-resource.js的时候,和vue.js版本不匹配居然屡屡出错,这是新手必须要注意的。这是一个坑啊,如果你们运行下面的代码不能渲染的话,99%是遇到这个坑了。

<script>
  var app = new Vue({
el: '#app',
data: {
  peps: ''  
},
mounted: function() {
  this.getJsonInfo()
},
methods: {
  getJsonInfo: function() {
    this.$http.get('Category.json').then(function(response){
      console.log(response.data.data)
      var resdata = response.data.data
      this.peps = resdata
    }).catch(function(response){
      console.log(response)
      console.log("居然没有弹窗")
    })
  }
  }
})</script>

html处不用做其它修改。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 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
Vue.js 中的 $watch使用方法
May 25 #Javascript
You might like
php简单封装了一些常用JS操作
2007/02/25 PHP
调整PHP的性能
2013/10/30 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
关于Js中new操作符的作用详解
2021/02/21 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python进阶篇之字典操作总结
2016/11/16 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
django 类视图的使用方法详解
2019/07/24 Python
python数据归一化及三种方法详解
2019/08/06 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
python 使用shutil复制图片的例子
2019/12/13 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
用Python制作音乐海报
2021/01/26 Python
法国在线药房:DoctiPharma
2020/10/21 全球购物
工商管理实习生自我鉴定范文
2013/12/18 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
工作睡觉检讨书
2014/02/25 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书