详解通过JSON数据使用VUE.JS
本文介绍如何在无数据库项目中利用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部分无需额外修改。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
Vue.js官网地址是多少?区分国际站与中文文档入口
2026-11-05 16:29:53
Vue/React 项目中怎么封装复用 flv.js 播放器组件
2026-11-03 19:42:36
Vue.js 动态路由权限控制与菜单生成实战方案
2026-11-03 13:46:47
Vue.js 企业级项目架构搭建与目录规范实战
2026-11-03 12:25:32
Vue 或 React 项目中集成 Swiper.js 的最佳实践
2026-11-02 10:29:42
