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>

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

vue.js

index.html

猜你喜欢