Vue源码探索--mustache模板引擎(基本使用)

目录

 

一、什么是模板引擎?

 二、将数据变为视图的方法:

1、纯DOM法

2、数据join()法:

3、ES6的反引导法:

4、模板引擎mustache:

(1)循环对象数组:

(2)数组嵌套:

(3)不循环对象数组:

(4)循环简单数组:

(5)布尔值:


一、什么是模板引擎?

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

 二、将数据变为视图的方法:

 

1、纯DOM法

通过原生JS分别创建( document.createElement(" "))不同的标签把子元素的标签添加(appendChild())到父元素的内容上。

    <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>

2、数据join()法:

join() 方法用于把数组中的所有元素放入一个字符串,元素是通过指定的分隔符进行分隔的。

    <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>

3、ES6的反引导法:

使用 ``进行字符串拼接,通过${arr[i].name}获取到元素的值。

    <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>

 

4、模板引擎mustache:

它的嵌入标记为 “{{}}” ,也是被Vue沿用的语法。需要先去下载 mustache.js 这里我们去BootCDN上下载直接引用。

使用Mustache.render(templateStr,data)方法。templateStr:模板字符串,data数据。

(1)循环对象数组:

   <div id="container">
        <ul>
            <li>
                <div class="hd">小明的基本信息</div>
                <div class="bd">
                    <p>姓名:小明</p>
                    <p>年龄:12</p>
                    <p>性别:男</p>
                </div>
            </li>
            <li>
                <div class="hd">小红的基本信息</div>
                <div class="bd">
                    <p>姓名:小红</p>
                    <p>年龄:11</p>
                    <p>性别:女</p>
                </div>
            </li>
            <li>
                <div class="hd">小强的基本信息</div>
                <div class="bd">
                    <p>姓名:小强</p>
                    <p>年龄:13</p>
                    <p>性别:男</p>
                </div>
            </li>
        </ul>
    </div>
</body>
<script src="../js/mustache.js"></script>
<script>
    var templateStr = `
        <ul>
            {{#arr}}
                <li>
                    <div class="hd">{{name}}的基本信息</div>
                    <div class="bd">
                        <p>姓名:{{name}}</p>
                        <p>性别:{{sex}}</p>
                        <p>年龄:{{age}}</p>
                    </div>
                </li>
            {{/arr}}
        </ul>
    `;

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

    var domStr = Mustache.render(templateStr, data);
    var dom = document.getElementById("container");
    dom.innerHTML = domStr;
    console.log(domStr);
</script>

 

(2)数组嵌套:

<div id="container">

</div>
</body>
<script src="../js/mustache.js"></script>
<script>
    var templateStr = `
        <ul>
        {{#arr}}
            <li>{{name}}的爱好是:
                <ol>{{#hobbies}}
                        <li>{{.}}</li>
                    {{/hobbies}}
                </ol>
            </li>
        {{/arr}}
        </ul>
    `;

    var data = {
        arr:[
            {"name":"小明","age":12,"hobbies":["游泳","羽毛球"]},
            {"name":"小红","age":11,"hobbies":["编程","弹钢琴"]},
            {"name":"小强","age":13,"hobbies":["游泳","羽毛球"]}
        ]
    };

    var domStr = Mustache.render(templateStr,data);
    var dom = document.getElementById("container");
    dom.innerHTML = domStr;
    console.log(domStr);
</script>

 

 (3)不循环对象数组:

<div id="container">

</div>
</body>
<script src="../js/mustache.js"></script>
<script>
    var templateStr = `
        <h1>我买了一个{{thing}},好{{mood}}啊!</h1>
    `;

    var data = {
        thing:"华为手机",
        mood:"心情"
    };

    var domStr = Mustache.render(templateStr,data);
    var dom = document.getElementById("container");
    dom.innerHTML = domStr;
    console.log(domStr);
</script>

 

 (4)循环简单数组:

<div id="container">

</div>
</body>
<script src="../js/mustache.js"></script>
<script>
    var templateStr = `
        <ul>
        {{#arr}}
            <li>{{.}}</li>
        {{/arr}}
        </ul>
    `;

    var data = {
        arr:["A","B","C"]
    };

    var domStr = Mustache.render(templateStr,data);
    var dom = document.getElementById("container");
    dom.innerHTML = domStr;
    console.log(domStr);
</script>

 

 (5)布尔值:

data里面m的true、false可以控制文本内容的显示。

<div id="container">

</div>
</body>
<script src="../js/mustache.js"></script>
<script>
    var templateStr = `
        {{#m}}
            <h1>您好</h1>
        {{/m}}
    `;

    var data = {
        m:true
    };

    var domStr = Mustache.render(templateStr,data);
    var dom = document.getElementById("container");
    dom.innerHTML = domStr;
    console.log(domStr);
</script>

注:代码地址。 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页