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

最近接到一个比较简单的项目，不准备使用数据库，打算用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 # json数据 # json # vue.js获取json数据 # Vue.js常用指令汇总（v-if、v-for等） # 浅谈vue.js中v-for循环渲染 # Vue.js常用指令之循环使用v-for指令教程 # vue.js指令v-for使用以及下标索引的获取 # 深入浅析Vue.js 中的 v-for 列表渲染指令 # vue.js实现数据库的JSON数据输出渲染到html页面功能示例 # 利用vue.js把静态json绑定bootstrap的table方法 # vue.js学习笔记:如何加载本地json文件 # vue.js基于v-for实现批量渲染 Json数组对象列表数据示例 # 是一个 # 这是 # 在这 # 这是一个 # 要注意 # 做一个 # 有两种 # 先来 # 少不了 # 不打算 # 要使 # 大家多多 # 就可以 # 不匹配 # 文档

返回目录在线咨询

上一篇：选择万网ECS建站后，怎样优化网站加载速度？
下一篇：C++如何反转字符串_C++ reverse算法与字符串操作教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求