vue源码-mustache模板引擎分析(一)-什么是模板引擎

最新推荐文章于 2024-04-08 09:33:09 发布

豆浆油条_煎bingo子

最新推荐文章于 2024-04-08 09:33:09 发布

阅读量162

点赞数 1

分类专栏： Vue 文章标签：模板引擎 DOM操作数组join ES6模板视图转换

本文链接：https://blog.csdn.net/qq_45679015/article/details/119862754

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.什么是模板引擎？

是将数据变成视图的一种最优雅的方案

二.历史中数据变成视图的方案

1.纯DOM法

<body>
    <div id="list"></div>
    <script type="text/javascript">
        var List = document.getElementById("list");

        var arr = [
            { "name": "小一", "age": 11 },
            { "name": "小二", "age": 12 },
        ]
        for (let i = 0; i < arr.length; i++) {
            let oLi = document.createElement("li")

            let hdDiv = document.createElement("div")
            hdDiv.className = "hd"
            hdDiv.innerText = arr[i].name+'的基本信息'

            let bdDiv = document.createElement("div")
            bdDiv.className = 'hd'

            let p1 = document.createElement("p")
            p1.innerText = '姓名：'+arr[i].name
            bdDiv.appendChild(p1)

            let p2 = document.createElement("p")
            p2.innerText = '年龄:'+arr[i].age
            bdDiv.appendChild(p2)

            
            oLi.appendChild(hdDiv)
            oLi.appendChild(bdDiv)
            
            List.appendChild(oLi)
        }
    </script>
</body>

特点：实际操作非常麻烦，但在DOM底层实现效率较高

2.数组join法

<body>
    <div id="list"></div>
    <script type="text/javascript">
    // 本质是字符串拼接
        var list = document.getElementById("list");

        var arr = [
            { "name": "小一", "age": 11 },
            { "name": "小二", "age": 12 },
        ]
        for (let i = 0; i < arr.length; i++) {
            list.innerHTML += [
                '<li>',
                    '<div class="hd">'+arr[i].name+'的信息</div>',
                    '<div class="bd">',
                        '<p>姓名：'+arr[i].name+'</p>',
                        '<p>年龄：'+arr[i].age+'</p>',
                    '</div>',
                '</li>',
            ].join('')
        }
    </script>
</body>

特点：实际上是利用了字符串拼接

3.ES6的反引号

<body>
    <div id="list"></div>

    <script type="text/javascript">
        // 本质是字符串
        var list = document.getElementById("list");

        var arr = [
            { "name": "小一", "age": 11 },
            { "name": "小二", "age": 12 },
        ]
        for (let i = 0; i < arr.length; i++) {
            list.innerHTML += [
                `
                <li>
                    <div class="hd">${arr[i].name}的信息</div>
                    <div class="bd">
                        <p>姓名：${arr[i].name}</p>
                        <p>年龄：${arr[i].age}</p>
                    </div>
                </li>
                `
            ].join('')
        }


    </script>
</body>

特点：利用模板字符串。