详解通过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 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
可以将word转成html的js代码
Apr 11 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
JS控制下拉列表左右选择实例代码
May 08 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 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
Bootstrap插件全集
2016/07/18 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
省级四好少年事迹材料
2014/01/25 职场文书
微笑服务演讲稿
2014/05/13 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
民事诉讼代理词
2015/05/25 职场文书
聘任书的格式及模板
2019/10/28 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL