vue数据双向绑定——mustache语法

mustache 模板，用于构造html页面内容。在实际工作中，当同一个模板中想要调用不同的函数来渲染画面，在已经自定义好了的前提下，可以在渲染页面时对传入的参数进行手动判断。

Mustache 的模板语法很简单，就那么几个：

{{data}}
{{#data}} {{/data}}
{{^data}} {{/data}}
{{.}}
{{>partials}}
{{{data}}}
{{!comments}}

先来一个简单demo，亲测无bug：

<!DOCTYPE html>
<html>
<head>
    <title>Event Delegation Example</title>
     <!-- CDN引用mustache.js引擎 -->
     <script type="text/javascript" src="https://cdn.bootcss.com/mustache.js/3.0.1/mustache.js"></script>
</head>
<body>
  <script type="text/javascript">
    var data = {
      "name": " xiaohua ",//name,msg,subject是键名
      "msg": {
        "sex": " female ", 
        "age": " 22 ", 
        "hobit": " reading "
      },
      "subject": ["Ch","En","Math","physics"] 
    }   
  
    var tpl = "<div>{{name}}</div>"; 
    var res = Mustache.render(tpl, data);
    document.write(res);
  </script>
</body>
</html>

1、{{data}}

{{}}就是 Mustache 的标示符，花括号里的 data 表示键名，这句的作用是直接输出与键名匹配的键值，例如：

var tpl = '{{name}}';
var res = Mustache.render(tpl, data);
document.write(res);

//输出：xiaohua

2、{{#data}} {{/data}}

以#开始、以/结束表示区块，它会根据当前上下文中的键值来对区块进行一次或多次渲染，例如改写下 Demo 中的 tpl：

var tpl = '{{#msg}} <p>{{sex}},{{age}},{{hobit}}</p> {{/msg}}';
var res = Mustache.render(tpl, data);
document.write(res);

//输出：female, 22, reading

注意：如果{{#data}} {{/data}}中的 data 值为 null, undefined, false；则不渲染输出任何内容。

3、{{^data}} {{/data}}

该语法与{{#data}} {{/data}}类似，不同在于它是当 data值为 null, undefined, false 时才渲染输出该区块内容。

var tpl = '{{^nothing}} 没找到nothing键名就会渲染这段 {{/nothing}}';
var res = Mustache.render(tpl, data);
document.write(res);

//输出：没找到nothing键名就会渲染这段

4、{{.}}

{{.}}表示枚举，可以循环输出整个数组，例如：

var tpl = '{{#subject}} <p>{{.}}</p> {{/subject}}';
var res = Mustache.render(tpl, data);
document.write(res);

//输出: Ch En Math physics

5、{{>partials}}

以>开始表示子模块，如{{> msg}}；当结构比较复杂时，我们可以使用该语法将复杂的结构拆分成几个小的子模块，例如：

var tpl = "<h1>{{namme}}</h1> <ul>{{>msg}}</ul>";
var partials = {
  msg: "{{#msg}}<li>{{sex}}</li><li>{{age}}</li><li>{{hobit}}</li>{{/msg}}"
};
var res = Mustache.render(tpl, data, partials);
document.write(res);

//输出：
// female
// 22
// reading

6、{{{data}}}

{{data}}输出会将等特殊字符转译，如果想保持内容原样输出可以使用{{{}}}，例如：

var tpl = '{{#msg}} <p>{{{age}}}</p> {{/msg}}'
var res = Mustache.render(tpl, data);
document.write(res);
console.log(typeof(data.msg.age));//控制台打印age类型为string

//输出：22

7、{{!comments}}

!表示注释，注释后不会渲染输出任何内容。

{{!这里是注释}}

//输出：

如果页面上的内容是从后台获取数据并渲染到页面上的，我们就可以使用mustache模板了。

值得注意的是，render的数据一定要与键名相符合。