从零单排系列之写一个类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版本的写法。今天就先写到这里吧。