从零单排系列之写一个类vue框架一

因为我希望这是一个系列的文章，所以开始之前先简单说一下，我几乎没用过 vue 这个框架写过项目，所以文章中难免会有一些比较外行的说法。当然，我用过一些时间的 angular，也曾经解决过一些同行们 vue 方面的问题。所以如果有人原因看的话，也不用担心我过于外行。
就像前些日子看到 阮一峰老师 说的话，我觉得老师这里真的说出了很多技术人员的心声，这里借用一下。
“我的技术文章，主要用来整理我还不懂的知识。我只写那些我还没有完全掌握的东西，那些我精通的东西，往往没有动力写。炫耀从来不是我的动机，好奇才是。”

言归正传，我准备了一本书，里面由浅入深地介绍了 vue 的用法（听人说的，我边看边写）。
先整理 vue 用法，然后再整理自己的框架。
最基本用法

<div id='app'>
    {{title}}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {title: 'Hello World'}
    })
</script>

简单分析一下，{{}} 用来声明这是一个 model，然后在 js 中定义这个 model

因为涉及到正则以及 dom 树的一些解析及递归等，我先写点简单点的，不然看的人都跑了。

<script>
    function Vue(obj) {var app = document.querySelector(obj.el);
        for(let i in obj.data) {this[i] = obj.data[i];
        }
 
        var html = app.childNodes;
        var that = this;
        html.forEach(function(data) {if(data.nodeName == '#text') {data.data = data.data.replace(/\{\{([\s\S]+)\}\}/g, function(a, b){return that[b]})
            }
        })
    }
</script>
<div id='app'>
    这里是{{title}}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {title: 'Hello World'}
    })
</script>

这段代码应该可以勉强应付上面的 vue 语句，当然 vue 肯定不会是这么实现的，因为这是一次性的。明天换个 es6 版本的写法。今天就先写到这里吧。