vue源码 -- 数据驱动 --模拟{{}}

#数据驱动模型
vue的执行流程
1.获得模板:模板中有位置
2.利用Vue构造函数中所提供的数据来填充模板的位置,得到可以在页面中显示的“标签”了。
3.将标签替换页面中原来位置的标签
Vue利用我们提供的数据和页面中模板生成了一个新的HTML标签(node元素),替换到了页面中放置模板的位置(元素整个被替换掉) 流程:DOM – 字符串模板-- VNode – 真正的DOM
简单模拟
<!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>数据驱动</title>
</head>

<body>
    <div id="root">
        <div>
            <p>{{name}} -- {{message}}</p>
        </div>
    </div>
    <script>
        let rkuohao = /\{\{(.+?)\}\}/g;
        let tmpNode = document.querySelector("#root");
        let data = {
            name: "我是一个新的name",
            message: "一个消息"
        };

        function compiler(template, data) {
            let childNodes = template.childNodes;
            for (let i = 0; i < childNodes.length; i++) {
                let type = childNodes[i].nodeType; //1元素3文本节点
                if (type === 3) {
                    let txt = childNodes[i].nodeValue;
                    txt = txt.replace(rkuohao, function(_, g) { //replace使用正则匹配一次,函数会被调用一次
                        console.log(1);
                        let key = g.trim(); //写在双花括号的东西
                        let value = data[key];
                        // 将{{xxx}}这个值替换
                        return value;
                    })
                    childNodes[i].nodeValue = txt;
                } else if (type === 1) {
                    // 元素,考虑它有没有子元素,是否需要其子元素进行 判断是否要插值
                    compiler(childNodes[i], data);
                }
            }
        }
        let generateNode = tmpNode.cloneNode(true);
        console.log(generateNode);
        compiler(tmpNode, data);
        console.log(tmpNode);
        // 由于两个数据都引没有生成新的template,所以说看到的是直接在页面中更新的数据,因为DOM是引用类型 这样做模板就没有
        root.parentNode.replaceChild(tmpNode, root);
    </script>
</body>

</html>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值