Vue之mustache模板引擎(笔记整理)

1 篇文章 0 订阅


前言

提示:本文所有笔记皆总结于B站-尚硅谷https://www.bilibili.com/video/BV1EV411h79m?p=15课程中的内容


一、什么是模板引擎?


模板引擎是将数据转变为视图最优雅的方案。

1、历史上曾经出现的数据变为视图的方法(四种)

  • 纯DOM法 —— 没有实战价值
<ul id="list"></ul>
<script>
    var arr = [
        { "name": "小明", "age": 12, "sex": "男" },
        { "name": "小绿", "age": 15, "sex": "男" },
        { "name": "小红", "age": 13, "sex": "女" }
    ];
    var list = document.getElementById('list');
    for (let i = 0; i < arr.length; i++) {
        let oLi = document.createElement('li');
        let hdDiv = document.createElement('div');
        
        oLi.innerText = arr[i].name + '基本信息';
        hdDiv.innerText ='年龄:'+ arr[i].age
        list.appendChild(oLi)
        list.appendChild(hdDiv)
        
    }
</script>
  • 数组join法 —— 是曾经的前端必会的知识
for (let i = 0; i < arr.length; i++) {
    // 按住滚轮往下拖
    list.innerHTML += [
        '<li>',
        '    <div class="hd">'+arr[i].name+'的基本信息</div>',
        '    <div class="bd">',
        '        <p>年龄:'+arr[i].age+'</p>',
        '        <p>姓名:'+arr[i].name+'</p>',
        '        <p>性别:'+arr[i].sex+'</p>',
        '    </div>',
        '</li>',
    ].join('')
}
  • ES6的反引号法 —— ES6中新增的 ${a}语法糖,很好用
 for (let i = 0; i < arr.length; i++) {
    list.innerHTML += ` <li>
        <div class="hd">${arr[i].name}的基本信息</div>
        <div class = "bd">
            <p>年龄:${arr[i].age}</p>
            <p>姓名:${arr[i].name}</p>
            <p>性别:${arr[i].sex}</p>
        </div>
    </li>
    `;
}
  • 模板引擎 —— 最优雅的方案

二、mustache用法

1.mustache库简介

  • 官网git:https://github.com/janl/mustache.js
  • mustache是“胡子”的意思,因为它的嵌入标记{{}}非常像胡子;
  • {{}}的语法也被Vue沿用;
  • mustache是最早的模板引擎库,比Vue诞生的早,它的底层实现机理在当时是非常有创造性的、轰动性的,为后续模板引擎的发展提供了崭新的思路。

2.mustache库基本使用

必须要引入mustache库,可以在bootcdn.com上找到它。

mustache的模板语法非常简单

  • mustache基本使用 - 不循环
<div id="list"></div>
// 引入
<script src="./jslib/mustache.js"></script>
<script>
    var templateStr = `
        <h1>我买了一个{{thing}},我很{{mood}}</h1>
    `;
    var data = {
        thing:"手机",
        mood:"开心"
    };
    var domStr = Mustache.render(templateStr, data);
    //上树
    var list = document.getElementById('list');
    list.innerHTML = domStr

</script>
  • mustache基本使用 - 循环简单数组
var templateStr = `
    <h1>
        {{#arr}}
            <li>{{.}}</li>
        {{/arr}}
    </h1>
`;
var data = {
    arr:['a','b','c','d']
};
  • mustache基本使用 - 循环对象数组
<ul>
    {{#arr}}
        <li>
            <div class="hd">{{name}}的基本信息</div>
            <div class = "bd">
                <p>年龄:{{age}}</p>
                <p>姓名:{{name}}</p>
                <p>性别:{{sex}}</p>
            </div>
        </li>
    {{/arr}}
</ul>
  • mustache基本使用 - 嵌套数组
var templateStr = `
    <h1>
        {{#arr}}
            {{name}}的爱好是:
            <ol>
                {{#hobbies}}
                    <li>{{.}}</li>
                {{/hobbies}}
            </ol>
        {{/arr}}
    </h1>
`;
var data = {
    arr: [
        { "name": "小明", "age": 12, "sex": "男", hobbies: ['王者荣耀', '改bug', '跑步'] },
        { "name": "小绿", "age": 15, "sex": "男", hobbies: ['王者荣耀', '羽毛球', '学前端'] },
        { "name": "小红", "age": 13, "sex": "女", hobbies: ['王者荣耀', '敲代码', '睡觉'] }
    ]
};
  • mustache基本使用 - 布尔值
var templateStr = `
    {{#m}}你好!{{/m}}
`;
var data = {
    m: true
};

三、mustache底层核心

mustache机理

mustache-tokens
循环状况下的tokens

<div>
	<ul>
		{{#arr}}
		<li>{{.}}</li>
		{{/arr}}
	</ul>
</div>

//对应的tokens
[
	["text","<div><ul>"]
	["#","arr",[
		["text","<li>"],
		["name","."],
		["text","</li>"],
	]],
	["text","</ul></div>"]
]

四、手写mustache库

1.简易版mustache库git地址

https://github.com/danfeng0205/Mustache_TemplateEngine.git

2.mustache中js文件调用关系

该图是针对代码中的js文件相互调用,以及各个函数的作用介绍
mustache中js模块相互调用

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值