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

2019-11-19 16:28:52

字体：大中小

来源：转载

供稿：网友

最近接到一个比较简单的项目，不准备使用数据库，打算用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处不用做其它修改。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：vue.js获取数据库数据实例代码

下一篇：JS中去掉array中重复元素的方法