vue处理json数据的原理_详解通过JSON数据使用VUE.JS

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

发布于 2020-2-19|

复制链接

本篇文章主要介绍了详解通过JSON数据使用VUE.JS，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

最近接到一个比较简单的项目，不准备使用数据库，打算用JSON数据就可以了。结合当前火热的VUE.JS进行数据渲染。尽管不打算使用数据库，可是一般的操作增删查改依旧是少不了的。如果使用到数据库的话，不妨做一个API出来，那么网站、APP等都可以依照这个进行操作。在这篇文章里面，我们只是打算简单的引用而已。下面先来看看我的JSON文件，这里是一个类别文档Category.json：

```javascript

{

"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的话，可以参考一下使用下面的代码：

```javascript

$(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中，把数据渲染出来

```xhtml

{{pep.name}}

```

上面的代码是使用JQuery的$.ajax 将json的数据引入，但如果你的项目里面没有使用到JQuery的话，就要使用到vue-resource.js了。在html中引入：

```xhtml

```

我第一次使用vue-resource.js的时候，和vue.js版本不匹配居然屡屡出错，这是新手必须要注意的。这是一个坑啊，如果你们运行下面的代码不能渲染的话，99%是遇到这个坑了。

```javascript

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("居然没有弹窗")

})

}

}

})

```

html处不用做其它修改。