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

最新推荐文章于 2024-05-24 14:16:00 发布

就叫小黄好了鸭

最新推荐文章于 2024-05-24 14:16:00 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue vue源码

本文链接：https://blog.csdn.net/weixin_42365757/article/details/123804191

版权

vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

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>

就叫小黄好了鸭

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue源码 - 模板解析（手写简易版）

vue.jsclass Vue { constructor(options) { this.$el = document.querySelector(options.el) this.$data = options.data console.log(options.el); // #app this.compile(this.$el) } compile(node) { con
复制链接

扫一扫

专栏目录