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

 更新时间:2017年05月26日 09:49:36   作者:凉风有兴  
本篇文章主要介绍了详解通过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异步axios获取的数据渲染到页面的方法

    vue异步axios获取的数据渲染到页面的方法

    今天小编就为大家分享一篇vue异步axios获取的数据渲染到页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue3.0基于views批量实现动态路由的方法(示例代码)

    vue3.0基于views批量实现动态路由的方法(示例代码)

    以前vue项目中也有很多实现动态路由的方法,比如有一些项目涉及权限的可能会使用api请求路由数据在来createRouter,或者本地构建使用routes.push来动态构建路由, 今天介绍一种新的方式来基于某个文件夹批量构建动态路由的方法,感兴趣的朋友一起看看吧
    2024-12-12
  • vue3-print-nb实现页面打印(含分页打印)示例代码

    vue3-print-nb实现页面打印(含分页打印)示例代码

    大多数后台系统中都存在打印的需求,在有打印需求时,对前端来说当然是直接打印页面更容易,下面这篇文章主要给大家介绍了关于vue3-print-nb实现页面打印(含分页打印)的相关资料,需要的朋友可以参考下
    2024-01-01
  • 解读Vue-loader的相关知识

    解读Vue-loader的相关知识

    这篇文章主要介绍了解读Vue-loader的相关知识,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue项目中使用axios上传图片等文件操作

    vue项目中使用axios上传图片等文件操作

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要给大家介绍了vue项目中使用axios上传图片等文件操作,需要的朋友参考下吧
    2017-11-11
  • 使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

    使用Vue.js报错:ReferenceError: “Vue is not d

    在前端开发中,ReferenceError: "Vue is not defined" 是一个常见的错误,该错误通常发生在项目中未正确引入 Vue.js 框架或代码配置存在问题时,本篇文章将详细分析该错误的成因,并提供多种解决方案,帮助开发者快速排查问题,需要的朋友可以参考下
    2024-12-12
  • Vue2.5学习笔记之如何在项目中使用和配置Vue

    Vue2.5学习笔记之如何在项目中使用和配置Vue

    这篇文章主要介绍了Vue2.5学习笔记之如何在项目中使用和配置Vue的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue-cli 3.0 自定义vue.config.js文件,多页构建的方法

    vue-cli 3.0 自定义vue.config.js文件,多页构建的方法

    今天小编就为大家分享一篇vue-cli 3.0 自定义vue.config.js文件,多页构建的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue 中使用print.js导出pdf操作

    vue 中使用print.js导出pdf操作

    这篇文章主要介绍了vue 中使用print.js导出pdf操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue项目获取url中的参数(亲测可用)

    Vue项目获取url中的参数(亲测可用)

    这篇文章主要介绍了Vue项目获取url中的参数,本文通过两种情况分析给大家详细介绍,感兴趣的朋友一起看看吧
    2022-08-08

最新评论