mustache 语法探析

 1： mustache  语法：

mustache 语法： 是"胡子"的意思, 因为嵌入标记像胡子 {{}}：
mustache 语法, 也被vue 使用。 mustache 语法库是最早的模板引擎库,  比vue 诞生的要早的多。
他的底层是实现机制在当时是非常有创造性的， 轰动性的， 为后续模板引擎的发展提供了崭新的思路。
UMD: 就是浏览器中也可以使用, 在 node 环境中也可以使用。 ==== UMD

需要mustache 库, 然后向外暴露一个全局对象。
// console.log(Mustache);  
在Mustache 库中向外暴露一个Mustache 对象。  然后可以调用render 函数。
Mustache.render(templateStr, data);    Mustache 有一个render 函数;
// 准备一个容器container 盒子
<div id="container"></div>
<script src="./jslib/mustache.js"></script>
<script>
   console.log(mustache);    // 输出一个对象, 里边有render 方法;
   var templateStr = `
    <ul>
       {{#arr}}
         '<li>'
          '  <div class="hd">{{mustache}}</div>'
          '  <div class="bd"></div>'
          '    <p>姓名: {{name}} </p>'
          '    <p>年龄：{{age}} </p>'
          '    <p>性别：{{sex}} </p>'
          '  </div>' 
          '</li>'
       {{/arr}}   // {{#arr}}  {{/arr}} 就会遍历循环, 遍历循环的长度, 就是数组的长度。
    </ul>
   `;
  var data = {
    arr = [
      {"name": "小明"， "age": 12, "sex": "男"},
      {"name": "小红"， "age": 11, "sex": "女"},
      {"name": "小强"， "age": 13, "sex": "男"},
    ]
  }

var domStr = Mustache.render(templateStr, data); 
var container = document.getElementById('container');
container.innerHTML = domStr;  赋值操作
</script>
// mustache 库也可以使用boolean 值;
<div>
  {{#m}}
    <h1>您好！</h1>    // <div></div> 中标签不显示
  {{/m}}
</div>

data() {
  return {
    m: false;
  }
}
-------------------------------------------------------------
mustache 库 是一个逻辑很弱的库。 没有vue 逻辑性强。

<template>
  <div>
     // 模板区域
  </div>
</template>

--------------------------------------------------------------
但是在ES6 之前没有模板字符串, 可以使用
<script type="text/template">
   // 模板区域不会被解析/ 渲染
</script>

在 mustache 语法中
{{# arr}} {{/arr}}  是一对,  开始和结束。
<script src="./jslib/mustache.js"></script>

// 在mustache 语法中;  还可以接受布尔值

<script> 
 var templateStr = `
    {{#m}}  // 开始节点
       <h1>你好</h1>
    {{/m}}  // 结束节点
 `
  var data = {
    m: false
  }

  var domStr = Musatche.render(tempalteStr, data);
  var container = document.getElementById('container');  //  获取DOM 元素
  container.innerHTMl = domStr;
</script>