详解通过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 相关文章推荐
客户端js性能优化小技巧整理
Nov 05 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
Bootstrap精简教程
Nov 27 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
JavaScript canvas实现流星特效
May 20 Javascript
JavaScript获取URL参数的方法分享
Apr 07 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下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
基于python编写的微博应用
2014/10/17 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
浅谈python数据类型及类型转换
2017/12/18 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
pymysql 开启调试模式的实现
2019/09/24 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
Python datetime模块的使用示例
2021/02/02 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
《中国的气候》教学反思
2014/02/23 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
邀请函范文
2015/02/02 职场文书
公安机关起诉意见书
2015/05/20 职场文书
暑期家教宣传单
2015/07/14 职场文书
教师节主题班会教案
2015/08/17 职场文书
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS