多层嵌套json解析与构建|vuejs初探

出于一些原因，码哥最近接触到了vuejs，不可否认，这个前端框架近来确实特别热。抱着求知的心态，点开了vuejs的官方教程。

理解Vuejs

首先看到的是这么一个定义：Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

渐进式框架？自底向上增量开发的设计？

感觉有点新鲜也有点懵逼，于是找到了知乎，很不巧，找到了答案，总结了一下，大概就这个意思：

所谓渐进式可以理解为弱主张，少侵入，较小的排异，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，可以在原有大系统的上面，把一两个组件改用它实现，甚至当jquery用。而其它框架，如Angular，我们使用它就必须要接受它的模块机制、依赖注入等，如果你的应用不是从头开始使用Angular，想中途换用是很麻烦的。

vuejs的声明试渲染

vuejs提供了一种声明试渲染的东东。看看它的定义及例子：

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统

  {{ message }}


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

上面简单的代码， 使用了“Mustache” 语法（双大括号）就将数据和视图绑定起来了，而且还是动态的！！！当更改app.message的值时，div中绑定的数据是会变化的。这个特性已经让让眼前一亮了，但后面另外一个表单控件绑定，确实有着很强的实用性。

表单控件绑定基础用法：

用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

传统方式解析与构建嵌套Json

在平时的开发中，做一些管理系统，无非都是大同小异，前端通过ajax请求接口获得json，然后将json解析组织后显示在界面，遇到修改增加，无非就是把用户输入的数据，组织成后台期望的json格式，提交上去而已。

但是，往往因为数据库表结构的关联关系，导致传输的json格式是多层嵌套的。最简单的嵌套关系

{
	"errorcode":0,
	"message":"",
	"data":{
                "id":1,
		"name":"Mark",
		"age":23,
		"sex":0,
		"address":{
			"name":"湖南长沙",
			"postcode":"4111003"
		}
	}
}

当然，要是address地址没填，返回的就是这样了

{
	"errorcode":0,
	"message":"",
	"data":{
                "id":1,
		"name":"Mark",
		"age":23,
		"sex":0,
		"address":null
	}
}

要把这些数据能够显示到界面，并且在更改后，按提交，能够用原格式提交回后台接口处理，jquery代码会这样码

	

	
姓名：
	
年龄：
	

		
		女
		
		男
	
	
地址：
	
邮编：

上面的代码是示例代码，许多细节并未优化，但即使优化细节后，代码仍然很难维护，更何况实际项目中的json数据的嵌套更为复杂。

Vuejs解析与构建嵌套Json

解析和构建同样的Json，此时运用vuejs的v-model 指令，事情好像就简单多了。直接上代码

	
	
	
	


	

		

		
姓名：
		
年龄：
		

			
			女
			
			男
		
		
地址：
		
邮编：
		
msg:{{$data}}
	
	

页面加载，首先通过ajax请求接口，获取json数据，通过vuejs的v-model 

指令使表单和json数据产生了双向绑定关系，这样输入框中显示出来了json中的数据，当修改输入框中的值时，实例StudentInfoApp 中的绑定的json数据也会同步改变，所以取到修改后的值就很简单了。

 

代码下载

请点击这里，解压密码【codeorigin.cn】，该示例需要部署在任意web服务器才能正常运行。