SOURCE

function MVVM(opt) {
	this.dom = document.querySelector(opt.el);
	this.data = opt.data || {};
	this.renderDom(this.dom);
}

MVVM.prototype = {
	init: {
		sTag: '{{',
		eTag: '}}'
	},
	render: function (node) {
		var self = this;
		var sTag = self.init.sTag;
		var eTag = self.init.eTag;

		var matchs = node.textContent.split(sTag);
		if (matchs.length){
			var ret = '';
			for (var i = 0; i < matchs.length; i++) {
				var match = matchs[i].split(eTag);
				if (match.length == 1) {
						ret += matchs[i];
				} else {
						ret = self.data[match[0]];
				}
				node.textContent = ret;
			}
		}
	},
	renderDom: function(dom) {
		var self = this;

		var attrs = dom.attributes;
		var nodes = dom.childNodes;

		Array.prototype.forEach.call(attrs, function(item) {
			self.render(item);
		});

		Array.prototype.forEach.call(nodes, function(item) {
			if (item.nodeType === 1) {
				return self.renderDom(item);
			}
			self.render(item);
		});
	}
}

var app = new MVVM({
	el: '#app',
	data: {
		name: 'zhaomenghuan',
		age: '24',
		color: 'red'
	}
});

<div id="app" class="section">
	Hello <span class='{{color}}'>{{name}}</span>!
	<p>age: {{age}}</p>
</div>

.section {
	box-shadow: 2px 2px 8px rgb(204, 204, 204);
	padding: 30px;
	margin: 30px;
}
.red {
	color: #f00;
}