Vue模板解析

Cwcgirl

已于 2024-07-04 17:25:50 修改

阅读量112

点赞数 1

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

于 2024-07-04 14:21:17 首次发布

本文链接：https://blog.csdn.net/Cwcgirl/article/details/140178503

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、vue中 this.$data 与 this.$el 是什么

this.$data 是data

this.$el 根节点

2、源码分析

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 }}
    </div>

    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                str:'你好'
            }
        })
    </script>
</body>
</html>

vue.js

//ES6的写法，也可以写成function Vue(){}
class Vue {
    constructor(options) {
        this.$el = document.querySelector(options.el);
        this.$data = options.data;
        // console.log(this.$el);   //<div id="app">…</div>
        // console.log(this.$data);   //{str: '你好'}
        this.compile(this.$el);
    }
    compile(node) {
        // console.log(node.childNodes);   //NodeList(3) [text, h1, text]
        node.childNodes.forEach((item, index) => {
            // console.log(item)   
            /*
                #text
                <h1>{{ str }}</h1>
                " {{ str }} "
            */
            // console.log(item.nodeType)   
            /*
                3
                1
                3
            */
            if (item.nodeType === 1) {   //元素节点
                // console.log(item);  //<h1>{{ str }}</h1>
                this.compile(item);

            }
            if (item.nodeType === 3) {   //这是文本节点，如果有{{}}就替换成数据
                //正则匹配{{}}
                let reg = /\{\{(.*?)\}\}/g;
                let text = item.textContent
                //给节点赋值
                item.textContent = text.replace(reg, (match, vmKey) => {
                    // console.log(vmKey)  //  str  ，前后有空格
                    vmKey = vmKey.trim()
                    return this.$data[vmKey]
                })
            }
        });
    }
}