vue源码 - 模板解析（手写简易版）vue源码 - 手写模板解析（简易版） vue源码 - 手写模板解析（简易版）

vue.js

class Vue { 
    constructor(options) { 
        this.$el = document.querySelector(options.el)
        this.$data = options.data
        console.log(options.el); // #app
        
        this.compile(this.$el)
    }

    compile(node) { 
        console.log(node);
        console.log(node.childNodes);
        node.childNodes.forEach((item,index) => { 
            console.log(item);
            console.log(item.nodeType);
            // 元素节点，再走一遍compile方法
            if (item.nodeType == 1) {
                console.log(item);
                this.compile(item)
            }
            // 文本节点，如果有{{}}就替换成数据
            if (item.nodeType == 3) { 
                // 正则匹配
                let reg = /\{\{(.*?)\}\}/g;
                let text = item.textContent;
                // 给节点赋值
                item.textContent = text.replace(reg, (match, vmKey) => {
                    vmKey = vmKey.trim()
                    console.log(vmKey);
                    return this.$data[vmKey]
                })
            }
        })
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <H1>{{str}}</H1>
        {{  str  }}
        <p>{{b}}</p>
    </div>

    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                str:"你好!",
                b:"这也是data数据"
            }
        })
    </script>
</body>
</html>