详解通过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-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
JS实现可视化文件上传
Sep 08 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
JavaScript async/await原理及实例解析
Dec 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
用PHP 4.2书写安全的脚本
2006/10/09 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
php使用curl访问https示例分享
2014/01/17 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
php递归实现无限分类的方法
2015/07/28 PHP
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
浅谈django orm 优化
2018/08/18 Python
python opencv摄像头的简单应用
2019/06/06 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
html5.2 dialog简介详解
2018/02/27 HTML / CSS
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
2014年会演讲稿范文
2014/01/06 职场文书
旷课检讨书大全
2014/01/21 职场文书
法律专业求职信
2014/05/24 职场文书
争先创优活动总结
2014/08/27 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
七年级作文之冬景
2019/11/07 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers