本文介绍如何在无数据库项目中利用JSON文件进行数据渲染。通过对比jQuery的$.ajax方法与vue-resource.js，演示将Category.json数据绑定至Vue实例并渲染至导航栏。重点提示Vue与vue-resource版本匹配问题，提供完整代码示例及HTML结构说明。
项目背景与JSON数据渲染方案
近期接手一个轻量级项目，决定不使用数据库，而是直接采用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"}
]
}
基于jQuery的JSON数据获取与渲染
接下来通过JavaScript将JSON数据渲染到导航栏。这里提供两种实现方式：若项目已引入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>基于vue-resource的无jQuery实现
上述代码利用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部分无需额外修改。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。