vue模板引擎mustache__初识（笔记）

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;