微客导航 » 文章资讯 » 详解通过JSON数据使用VUE.JS

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

2024-02-21 23:36:04 317

最近接到一个比较简单的项目，不准备使用数据库，打算用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处不用做其它修改。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐