vue源码解析之mustache模板引擎

简介: 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>
`

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

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



目录
相关文章
|
1天前
|
监控 安全 NoSQL
采用java+springboot+vue.js+uniapp开发的一整套云MES系统源码 MES制造管理系统源码
MES系统是一套具备实时管理能力,建立一个全面的、集成的、稳定的制造物流质量控制体系;对生产线、工艺、人员、品质、效率等多方位的监控、分析、改进,满足精细化、透明化、自动化、实时化、数据化、一体化管理,实现企业柔性化制造管理。
15 3
|
2天前
|
Linux 网络安全 Windows
网络安全笔记-day8,DHCP部署_dhcp搭建部署,源码解析
网络安全笔记-day8,DHCP部署_dhcp搭建部署,源码解析
|
3天前
HuggingFace Tranformers 源码解析(4)
HuggingFace Tranformers 源码解析
6 0
|
3天前
HuggingFace Tranformers 源码解析(3)
HuggingFace Tranformers 源码解析
6 0
|
3天前
|
开发工具 git
HuggingFace Tranformers 源码解析(2)
HuggingFace Tranformers 源码解析
6 0
|
3天前
|
并行计算
HuggingFace Tranformers 源码解析(1)
HuggingFace Tranformers 源码解析
8 0
|
4天前
PandasTA 源码解析(二十三)
PandasTA 源码解析(二十三)
42 0
|
8月前
|
JavaScript 容器
【Vue源码解析】mustache模板引擎
【Vue源码解析】mustache模板引擎
35 0
|
10月前
|
JavaScript
01 - vue源码解析之vue 数据绑定实现的核心 Object.defineProperty()
01 - vue源码解析之vue 数据绑定实现的核心 Object.defineProperty()
60 0
|
11月前
|
缓存 JavaScript 前端开发
Vue v-memo 指令的使用与源码解析
Vue v-memo 指令的使用与源码解析
133 0

推荐镜像

更多