实现一个MVVM框架一

为了弄懂vue的原理，所以打算写个简陋的demo，实现一些vue的功能，会持续更新

渲染出来的效果

html

<div id="app">
    <div class="list">
    	<h1>{{title}}h1>
    div>
    <p>{{name}}{{age}}p>
    <div>{{content}}div>
div>

js

let Nodes = [...document.getElementById('app').childNodes]
let reg = /\{\{((?:.|\r?\n)+?)\}\}/g;
let data = {
	title:'标题',
	name:'测试',
	age:26,
	content:'内容'
}

Nodes.forEach(item=>{
	if(reg.test(item.textContent)){
		let val = item.textContent.replace(reg,'$1,')
		let array = val.trim().split(',')
		array.length = array.length-1;
		console.log(array)
		let newArray = []
		array.forEach(cell=>{
			for(let key in data){
				if(cell == key){
					console.log(cell,data[key])
					newArray.push(data[key])
				}
			}
		})
		// 赋值
		item.textContent = newArray.join('')
	}
})