详解通过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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
js数组的操作指南
Dec 28 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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
检测png图片是否完整的php代码
2010/09/06 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
原生js实现简单的模态框示例
2017/09/08 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
python得到windows自启动列表的方法
2018/10/14 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
幼儿园教师岗位职责
2014/03/17 职场文书
春风行动实施方案
2014/03/28 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
Golang 遍历二叉树
2022/04/19 Golang