详解通过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)); } }); functionpushDom(data1){ varvm=newVue({el:'#app',data:{peps:data1}}); } })
然后到html中,把数据渲染出来
{{pep.name}}
上面的代码是使用JQuery的$.ajax将json的数据引入,但如果你的项目里面没有使用到JQuery的话,就要使用到vue-resource.js了。
在html中引入:
我第一次使用vue-resource.js的时候,和vue.js版本不匹配居然屡屡出错,这是新手必须要注意的。这是一个坑啊,如果你们运行下面的代码不能渲染的话,99%是遇到这个坑了。
html处不用做其它修改。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。