vue模板引擎mustache__初识（笔记）_mustache是vue.js中独有的引擎技术吗-优快云博客

本文链接：https://blog.youkuaiyun.com/Flying____fish/article/details/123933895

本文介绍了Vue模板引擎与Mustache的关系，Mustache作为早期的模板引擎对后来的技术发展产生了深远影响。模板引擎是将数据转化为视图的一种优雅解决方案，文章详细阐述了从纯DOM操作、数组join方法到ES6模板字符串和模板引擎的演变过程，通过实例展示了Mustache的基本使用方法，包括循环、嵌套、条件判断等特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、学Vue模板引擎和mustache什么联系

2、什么是模板引擎？

3、历史上曾经出现的数据变为试图的方法

1、学Vue模板引擎和mustache什么联系

回答

mustache是最早的模板引擎库，比Vue诞生要早，他的底层实现机理在当时是非常有创造性的、轰动性的。为后续的模板引擎的发展提供了崭新的思路。
mustache简介
- mustache官方地址
- 解读：
  
  mustache是“胡子”的意思，因为它的嵌入标记{{}}非常像胡子
- {{}}的语法也被Vue沿用，也是学习mustache的原因

2、什么是模板引擎？

回答

模板引擎是将数据变为试图最优雅的解决方案
什么是数据？

形如：

[
    {"name":"aaa","age":10,"sex":"male"},
    {"name":"bbb","age":11,"sex":"female"},
    {"name":"ccc","age":12,"sex":"male"}
]

什么是视图？

 <ul>
      <li>
        <div class="hd">aaa的基本信息</div>
        <div class="bd">
          <p>姓名：aaa</p>
          <p>年龄：10</p>
          <p>性别：male</p>
        </div>
      </li>
      <li>
        <div class="hd">bbb的基本信息</div>
        <div class="bd">
          <p>姓名：bbb</p>
          <p>年龄：11</p>
          <p>性别：female</p>
        </div>
      </li>
      ......
    </ul>

3、历史上曾经出现的数据变为试图的方法

纯DOM法---相对当今环境来说显得笨拙，没有实战价值
数组join法---曾经一段时间非常流行，最为前端必会知识
ES6反引号法---ES6中新增的的语法糖，很好用，也就是所谓的模板字符串
模板引擎---解决数据变为视图的优雅的方法

纯DOM法

这应该是js最初作视图渲染的方法，采用原生的创建节点，加字符串拼接实现将数据变为视图的过程。
数组join法

当学解到这种方法的时候，确实是无比巧妙
```
[
    '<li>',
    '  <div class="hd">aaa的基本信息</div>',
    '  <div class="bd">',
    '    <p>姓名：aaa</p>',
    '    <p>年龄：10</p>',
    '    <p>性别：male</p>',
    '  </div>',
    '</li>'
].join('')
```
可以想象在ES6和模板引擎问世之前对前端开发的帮助是多大，成功解决了纯DOM方法所带来的不变，对开发效率也是一种提高。

ES6反引号法

`
    <li>
        <div class="hd">aaa的基本信息</div>
        <div class="bd">
            <p>姓名：aaa</p>
            <p>年龄：10</p>
            <p>性别：male</p>
        </div>
    </li>
`

这个相对上一种就更见清晰明了了

模板引擎

mustache基本使用

引入：

mustache支持多种引入方式可参考官方所提供的，这里最直接的标签引入，BootCDN地址,如果只是在html进行简单测试建议引用4.1版本。

不过近期直接复制链接浏览器发现打不开，看不到代码，需要做一些处理，如下：
```
原本地址：
https://cdn.bootcdn.net/ajax/libs/mustache.js/4.1.0/mustache.js
更改后
https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.1.0/mustache.js
```

使用---循环对象数组

  // 接收两个参数：模板和数据
  Mustache.render(template, data);

<body>
  <div id="container"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.1.0/mustache.js"></script>
  <script>
    console.log(Mustache);
    var template = `
        <ul>
          {{#arr}}
            <li>
              <div>{{name}}的基本信息</div>
              <div>
                <p>姓名：{{name}}</p>
                <p>年龄：{{age}}</p>
                <p>性别：{{sex}}</p>
              </div>
            </li>
          {{/arr}}
        </ul>
      `
    var data = {
      arr: [
        { "name": "aaa", "age": 10, "sex": "male" },
        { "name": "bbb", "age": 11, "sex": "female" },
        { "name": "ccc", "age": 12, "sex": "male" },
      ]
    }
    var domstr = Mustache.render(template, data);
    container.innerHTML = domstr;
  </script>
</body>

使用---不进行循环

var template = `
    买了一个{{thing}},好{{mod}}阿
`
var data ={
    thing:'手机',
    mod:"开心"
}
// 接收两个参数：模板和数据
var domstr = Mustache.render(template, data);
container.innerHTML = domstr;
//买了一个手机,好开心阿

使用---简单循环数组

    var template = `
        <ul>
          {{#arr}}
            <li>
              {{.}}
            </li>
          {{/arr}}
        </ul>
    `
    var data = {
      arr: [
        "aaaa", "bbbbb", "cccc"
      ]
    }
    var domstr = Mustache.render(template, data);
    var container = document.getElementById("container");
    container.innerHTML = domstr;

使用---嵌套数组

var template = `
        <ul>
          {{#arr}}
            <li>
              {{name}}的爱好
             <ol>
                {{#hobbies}}
                  <li>{{.}}</li>
                {{/hobbies}}
              </ol>
            </li>
          {{/arr}}
        </ul>
    `
    var data ={
      arr:[
        {"name":"aaa","age":10,"hobbies":[11111111,222222,3333]},
        {"name":"bbb","age":11,"hobbies":[4444,5555]},
        {"name":"ccc","age":12,"hobbies":[123,456]},
      ]
    }
    // 接收两个参数：模板和数据
    var domstr = Mustache.render(template, data);
    var container = document.getElementById("container");
    container.innerHTML = domstr;

使用---布尔值

    var template = `
        {{#m}}
          <h1>这是个标题，会隐藏</h1>
        {{/m}}
    `
    var data ={
      m:false
    }
    // 接收两个参数：模板和数据
    var domstr = Mustache.render(template, data);
    var container = document.getElementById("container");
    container.innerHTML = domstr;