Vue模板技术-mustache

唐璜Taro

已于 2022-05-25 17:29:54 修改

阅读量115

点赞数

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

于 2021-10-24 16:44:50 首次发布

本文链接：https://blog.csdn.net/weixin_44067347/article/details/120935568

版权

Vue.js 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

Vue源码非常庞大，各种机理非常多：从模板引擎，到数据劫持，虚拟节点，最小量更新，抽象语法树等等，本系列文章会逐个击破，循序渐进。

1. 模板引擎

在这里插入图片描述
模板引擎是将数据转成视图的最优雅的解决方案。譬如 v-for，实际上就是一种模板引擎。

关于模板引擎的“前世今生”：

ES6反引号法：
图 1.1

在这里插入图片描述

BootCDN Link about mustache ：

https://cdn.bootcdn.net/ajax/libs/mustache.js/4.2.0/mustache.js

mustache 循环对象数组：

2. mustache 基本使用方法

在这里插入图片描述
Demo：

<!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>
    <script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.1.0/mustache.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.0.1/mustache.js"></script> -->
</head>

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

    <div id="mirrorList">
        <ul>
            {{#arr}}
            <li>
                <div class="hd">{{name}}的基本信息</div>
                <div class="bd">
                    <p>姓名：{{name}}</p>
                    <p>年龄：{{age}}</p>
                    <p>性别：{{sex}}</p>
                </div>
            </li>
            {{/arr}}
        </ul>
    </div>

    <script>
        var templateStr = `
        <ul>
            {{#arr}}
            <li>
                <div class="hd">{{name}}的基本信息</div>
                <div class="bd">
                    <p>姓名：{{name}}</p>
                    <p>年龄：{{age}}</p>
                    <p>性别：{{sex}}</p>
                </div>
            </li>
            {{/arr}}
        </ul>
        `;
        // console.log('mustache:', Mustache);
        var data = {
            arr: [
                { name: "小明", age: 12, sex: '男' },
                { name: "小红", age: 11, sex: '女' },
                { name: "小强", age: 13, sex: '男' },
            ]
        }

        var templateStr2 = `
       <ul>
            {{#arr}}
                <h1>{{name}}有个{{phone}}手机</h1>
            {{/arr}}
        </ul>
       `;
        var templateStr3 = `
       <ul>
            {{#arr}}
                <h1>{{name}}想买个{{phone}},桌子上现在有
              
                    {{#phoneType}} 
                {{.}}
                {{/phoneType}}   
                   
                </h1>
            {{/arr}}
        </ul>
       `;
        var data2 = {
            arr: [{ name: '小明', phone: "iPhone", phoneType: ['iPhone 13', 'iPhone 12', 'iPhone 11'] }]
        }
        var data3 = {
            arr: ['孙悟空', '猪八戒', '沙和尚']
        }
        // var domStr = Mustache.render(templateStr, data)
        // console.log(Mustache.render(templateStr, data));

        var list = document.getElementById('list')
        // list.innerHTML = Mustache.render(templateStr, data)   //循环测试

        list.innerHTML = Mustache.render(templateStr3, data2)  //普通

    </script>
</body>

</html>

3. mustache 底层机理

在这里插入图片描述

mustache 为什莫可以用 {{}}，能换成《》,<>其他符号吗？
mustache的{{ }} 是怎么完成数值的替换，是单纯利用的正则表达式吗？

在这里插入图片描述

唐璜Taro

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue模板技术-mustache

Vue源码非常庞大，各种极力非常多：从模板引擎，到数据劫持，虚拟节点，最小量更新，抽象语法树等等，本系列文章会逐个击破，循序渐进。1. 模板引擎模板引擎是将数据转成视图的最优雅的解决方案。譬如 v-for，实际上就是一种模板引擎。关于模板引擎的“前世今生”：...
复制链接

扫一扫

专栏目录