vue源码解析之mustache模板引擎

🎀个人主页：努力学习前端知识的小羊
感谢你们的支持：收藏🎄 点赞🍬 加关注🪐

mustache 基本语法

• 嵌入标记：{{ }}
• 必须要引入mustache库,
• 模板语法

<ul>
   {{#arr}}
   	<div>{{name}}的信息</div>
   	<div>
   		<p>姓名:{{name}}</p>
   		<p>年龄:{{age}}</p>
   		<p>性别:{{sex}}</p>
   	</div>
   {{/arr}}
</ul>

• 然后通过 Mustache.render(templateStr, data) 方式生成 dom 模板

token

token是一个js的嵌套函数，就是模板字符串的Js表示

模板字符串：<h1>我买了一个{{thing}}，好{{mood}}啊</h1>

token:

[
	["text","<h1>我买了一个"]，
	["name","thing"]，
	["text",",好"],
	["name","mood"],
	["text","啊</h1>"]
]

简单的数据渲染案例

const data = {
  arr: ['红', '橙', '黄']
}
// dom 模板
const templateStr = `
    <ul>
      {{#arr}}
        <li>
          {{.}}
        </li>
      {{/arr}}
  </ul>
`

在模板里就用 . 表示数组的每一项

🎯以上是我根据所学知识所作的总结，希望大家多多指教，期待你们的一键三连哦🎈🎈🎈