Vue2源码解读-模板解析

海上彼尚

已于 2024-05-29 19:01:44 修改

阅读量140

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2024-05-29 18:42:07 首次发布

本文链接：https://blog.csdn.net/weixin_63443072/article/details/139303179

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

两个文件，一个html文件，一个js文件。

<body>
    <div id="app">

        <h1>{{str}}</h1>
        {{str}}11
    </div>
</body>
<script src="./Vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            str: "你好"
        }
    })
</script>

class Vue {
    constructor(options) {
        this.$el = document.querySelector(options.el);
        this.$data = options.data;

        this.compile(this.$el);
    }

    // 编译模板
    compile(node) {
        node.childNodes.forEach((item, index) => {
            console.log(item, item.nodeType)
            // 判断节点类型
            // 1===元素节点
            if (item.nodeType === 1) { }
            // 2===属性节点
            else if (item.nodeType === 2) { }
            // 3===文本节点
            else if (item.nodeType === 3) {
                let reg = /\{\{(.*?)\}\}/g;
                let text = item.textContent;
                item.textContent = text.replace(reg, (match, key) => {
                    key = key.trim();
                    return this.$data[key];
                })
            }
        })

    }
}