Vue源码探秘之mustache模板引擎_npm mustache

作者：小丑西瓜9 | 2024-05-23 01:31:04

踩

npm mustache

mustache模板引擎知识前置

说白了，本篇从源码的角度，给我讲明白，双花括号如何就能拿到指定的数值，并展示到视图。

一、什么是模板引擎

模板引擎是将数据要变为视图最优雅的解决方案

1.0 历史上曾经出现的数据变为视图的方法

纯DOM法：非常笨拙， 没有实战价值
数组join法：曾几何时非常流行， 是曾经的前端必会知识
ES6的反引号法：ES6中新增的`${a}`语法糖， 很好用
模板引擎：解决数据变为视图的最优雅的方法 
1
2
3
4

1.1 数据变为视图-纯DOM法

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

    <script> var arr = [
            { "name": "小明", "age": 12, "sex": "男" },
            { "name": "小红", "age": 11, "sex": "女" },
            { "name": "小强", "age": 13, "sex": "男" }
        ];

        var list = document.getElementById('list');

        for (var i = 0; i < arr.length; i++) {
            // 每遍历一项，都要用DOM方法去创建li标签
            let oLi = document.createElement('li');
            // 创建hd这个div
            let hdDiv = document.createElement('div');
            hdDiv.className = 'hd';
            hdDiv.innerText = arr[i].name + '的基本信息';
            // 创建bd这个div
            let bdDiv = document.createElement('div');
            bdDiv.className = 'bd';
            // 创建三个p
            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);
            let p3 = document.createElement('p');
            p3.innerText = '性别：' + arr[i].sex;
            bdDiv.appendChild(p3);

            // 创建的节点是孤儿节点，所以必须要上树才能被用户看见
            oLi.appendChild(hdDiv);
            // 创建的节点是孤儿节点，所以必须要上树才能被用户看见
            oLi.appendChild(bdDiv);
            // 创建的节点是孤儿节点，所以必须要上树才能被用户看见
            list.appendChild(oLi);
        } </script>
</body>

</html> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

1.2 数据变为视图-数组join法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

    <script> var arr = [
            { "name": "小明", "age": 12, "sex": "男" },
            { "name": "小红", "age": 11, "sex": "女" },
            { "name": "小强", "age": 13, "sex": "男" }
        ];

        var list = document.getElementById('list');

        // 遍历arr数组，每遍历一项，就以字符串的视角将HTML字符串添加到list中
        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>',
                '        <p>性别：' + arr[i].sex + '</p>',
                '    </div>',
                '</li>'
            ].join('')
        } </script>
</body>

</html> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

1.3 数据变为视图-ES6的反引号法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

    <script> var arr = [
            { "name": "小明", "age": 12, "sex": "男" },
            { "name": "小红", "age": 11, "sex": "女" },
            { "name": "小强", "age": 13, "sex": "男" }
        ];

        var list = document.getElementById('list');

        // 遍历arr数组，每遍历一项，就以字符串的视角将HTML字符串添加到list中
        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].sex}</p>    
                        <p>年龄：${arr[i].age}</p>    
                    </div>    
                </li>
            `;
        } </script>
</body>

</html> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

二、mustache的基本使用

• mustache官方git： github.com/janl/mustac…

• mustache是“胡子” 的意思，因为它的嵌入标记{ { }}非常像胡子。没错， { { }}的语法也被Vue沿用，这就是我们学习mustache的原因。

• mustache是最早的模板引擎库，比Vue诞生的早多了

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/610755

Vue源码探秘之mustache模板引擎_npm mustache

mustache模板引擎知识前置

说白了，本篇从源码的角度，给我讲明白，双花括号如何就能拿到指定的数值，并展示到视图。

一、什么是模板引擎

模板引擎是将数据要变为视图最优雅的解决方案

1.0 历史上曾经出现的数据变为视图的方法

1.1 数据变为视图-纯DOM法

1.2 数据变为视图-数组join法

1.3 数据变为视图-ES6的反引号法

二、mustache的基本使用

• mustache官方git： github.com/janl/mustac…

• mustache是“胡子” 的意思， 因为它的嵌入标记{ { }}非常像胡子。没错， { { }}的语法也被Vue沿用， 这就是我们学习mustache的原因。

• mustache是最早的模板引擎库， 比Vue诞生的早多了

• mustache是“胡子” 的意思，因为它的嵌入标记{ { }}非常像胡子。没错， { { }}的语法也被Vue沿用，这就是我们学习mustache的原因。

• mustache是最早的模板引擎库，比Vue诞生的早多了