姓名:{{item.name}}
昵称:{{item.nick}}
$(document).ready(function () {
$.getJSON("data.json", function (result, status) {
var v = new Vue({
el: '#main',
data: {
rows: result
}
})
});
});
test.json
[
{
"name": "王小婷",
"nick": "祈澈菇凉"
}, {
"name": "安安",
"nick": "坏兔子"
}, {
"name": "编程微刊",
"nick": "简书"
}
]
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，欢迎加入编程微刊qq群：260352626

json后端给我的数据，现在要将 标准陪练-5节 这条数据不展示。我的想法第一想法是要么隐藏，要么处理json删除这条数据。我用delete，但是发现原json长度不变只是变空了，而且在v-for渲染的时候报错了
{{item.lesson_name}}
var app = new Vue({
el:"#myapp",
data:function(){
return{
json:[
{"type_name":"正课","lesson_name":"标准陪练课(中级)-90节","course_name":"标准陪练","lesson_no":"BZ-c2-3","lesson_num":90,"lesson_id":37,"xufei_buy_num":1,"level_name":"中级","money":11380,"shengyu_lesson_num":100,"free_lesson_num":12,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-10-16 13:32:41","lesson_min":50,"shouci_buy_num":1},
{"type_name":"正课","lesson_name":"标准陪练课(中级)-120节","course_name":"标准陪练","lesson_no":"BZ-c2-4","lesson_num":120,"lesson_id":38,"xufei_buy_num":0,"level_name":"中级","money":14180,"shengyu_lesson_num":0,"free_lesson_num":0,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-10-16 13:33:38","lesson_min":50,"shouci_buy_num":0},
{"type_name":"正课","lesson_name":"标准陪练课(中级)-200节","course_name":"标准陪练","lesson_no":"BZ-c2-5","lesson_num":200,"lesson_id":39,"xufei_buy_num":0,"level_name":"中级","money":22880,"shengyu_lesson_num":217,"free_lesson_num":17,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-10-16 13:35:01","lesson_min":50,"shouci_buy_num":1},
{"type_name":"正课","lesson_name":"标准陪练课(高级)-30节","course_name":"标准陪练","lesson_no":"BZ-c3-1","lesson_num":30,"lesson_id":40,"xufei_buy_num":1,"level_name":"高级","money":4680,"shengyu_lesson_num":35,"free_lesson_num":10,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-10-16 13:36:20","lesson_min":50,"shouci_buy_num":0},
{"type_name":"正课","lesson_name":"标准陪练课(高级)-60节","course_name":"标准陪练","lesson_no":"BZ-c3-2","lesson_num":60,"lesson_id":41,"xufei_buy_num":1,"level_name":"高级","money":9180,"shengyu_lesson_num":58,"free_lesson_num":2,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-10-16 13:37:36","lesson_min":50,"shouci_buy_num":0},
{"type_name":"正课","lesson_name":"标准陪练课(高级)-90节","course_name":"标准陪练","lesson_no":"BZ-c3-3","lesson_num":90,"lesson_id":42,"xufei_buy_num":0,"level_name":"高级","money":13480,"shengyu_lesson_num":91,"free_lesson_num":3,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-10-16 13:38:41","lesson_min":50,"shouci_buy_num":1},
{"type_name":"正课","lesson_name":"标准陪练课(高级)-120节","course_name":"标准陪练","lesson_no":"BZ-c3-4","lesson_num":120,"lesson_id":43,"xufei_buy_num":0,"level_name":"高级","money":17080,"shengyu_lesson_num":0,"free_lesson_num":0,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-10-16 13:39:45","lesson_min":50,"shouci_buy_num":0},
{"type_name":"正课","lesson_name":"标准陪练课(高级)-200节","course_name":"标准陪练","lesson_no":"BZ-c3-5","lesson_num":200,"lesson_id":44,"xufei_buy_num":0,"level_name":"高级","money":27680,"shengyu_lesson_num":0,"free_lesson_num":0,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-10-16 13:40:58","lesson_min":50,"shouci_buy_num":0},
{"type_name":"正课","lesson_name":"标准陪练-20节","course_name":"标准陪练","lesson_no":"BZ-c0-02","lesson_num":20,"lesson_id":64,"xufei_buy_num":0,"level_name":"全级别","money":2000,"shengyu_lesson_num":0,"free_lesson_num":0,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-11-24 15:15:22","lesson_min":50,"shouci_buy_num":0},
{"type_name":"正课","lesson_name":"标准陪练-5节","course_name":"标准陪练","lesson_no":"BZ-c0-01","lesson_num":20,"lesson_id":63,"xufei_buy_num":0,"level_name":"全级别","money":2000,"shengyu_lesson_num":14,"free_lesson_num":0,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-11-24 15:14:44","lesson_min":25,"shouci_buy_num":1}
]
}
},
created:function(){
//解开就报错
// for (let i = 0; i < this.json.length; i++) {
//     console.log(i)
//     for(let k in this.json[i]){
//         if (this.json[i][k] == "标准陪练-5节") {
//             delete this.json[i];
//             break;
//         }
//     }
// }
}
})

详解通过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处不用做其它修改。

实现过程
实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。
因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。
因此接下去我们执行以下3个步骤，实现数据的双向绑定：
1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2.实现一个订阅者Suber，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
1. Observer
Observer是一个数据监听器，其实现核心方法就是Object.defineProperty( )。如果要对所有属性都进行监听的话，那么可以通过递归方法遍历所有属性值，并对其进行Object.defineProperty( )处理。如下代码，实现了一个Observer。
2. Suber
订阅者Suber执行对应的get函数进行初始化, 在初始化的时候需要将自己添加进订阅者队列 SubQueue中, 当原来的值发生变化时执行相应的update函数
3. SubQueue
收集所有订阅者发生变化时通知订阅者
4. Compile
解析模板指令，并替换模板数据，初始化视图。将模板指令对应的节点绑定对应的更新函数，初始化相应的订阅器
5. Vue实例
测试页面
最后，如果觉得好的话，不要忘记点个收藏或者赞同哦~还可以添加我的vx:jgxiaokeai~加入前端技术交流群与千位大咖一起交流学习哦~