vue源码-mustache模板引擎分析(二)-mustache的基本使用

一.什么是mustache？

mustache是胡子的意思，因为它嵌入标记{ {}}像胡子。

mustache是一种没有逻辑的模板语法，因为它没有if语句，else语句和for循环，所以不能再模板中使用if..else做循环判断，也不能在模板中使用表达式。

它可以应用于HTML,配置文件，源代码等，通过使用对象提供的值在模板中展开标记显示到页面上。

---

二.mustache库的使用

（1）引入mustache.js[4.1.0版本]

<script src='../js/mustache.js'></script>

---

（2）mustache基本模板语法

{ {#arr}}{ {/arr}}用作for循环渲染，当arr的值为非空数组时，mustache不会遍历该数组，渲染出个数和该数组长度相等的DOM元素。

---

（3）使用Mustache的render方法处理模板后填充到目标位置

render()接收两个参数，第一个参数是模板字符串，第二个参数是data数据：

-如果类型为对象的话，在模板中书写对象属性，可以渲染出对象的值

var template = `
      <ul>
        {
  {#arr}}
        <li>
            <div class=&#