mustache 语法探析
1: mustache 语法:mustache 语法: 是"胡子"的意思, 因为嵌入标记像胡子 {{}}:mustache 语法, 也被vue 使用。 mustache 语法库是最早的模板引擎库,比vue 诞生的要早的多。他的底层是实现机制在当时是非常有创造性的, 轰动性的, 为后续模板引擎的发展提供了崭新的思路。UMD: 就是浏览器中也可以使用, 在 node 环境中也可以使用。 ==== UM
·
1: mustache 语法:
mustache 语法: 是"胡子"的意思, 因为嵌入标记像胡子 {{}}:
mustache 语法, 也被vue 使用。 mustache 语法库是最早的模板引擎库, 比vue 诞生的要早的多。
他的底层是实现机制在当时是非常有创造性的, 轰动性的, 为后续模板引擎的发展提供了崭新的思路。
UMD: 就是浏览器中也可以使用, 在 node 环境中也可以使用。 ==== UMD
需要mustache 库, 然后向外暴露一个全局对象。
// console.log(Mustache);
在Mustache 库中向外暴露一个Mustache 对象。 然后可以调用render 函数。
Mustache.render(templateStr, data); Mustache 有一个render 函数;
// 准备一个容器container 盒子
<div id="container"></div>
<script src="./jslib/mustache.js"></script>
<script>
console.log(mustache); // 输出一个对象, 里边有render 方法;
var templateStr = `
<ul>
{{#arr}}
'<li>'
' <div class="hd">{{mustache}}</div>'
' <div class="bd"></div>'
' <p>姓名: {{name}} </p>'
' <p>年龄:{{age}} </p>'
' <p>性别:{{sex}} </p>'
' </div>'
'</li>'
{{/arr}} // {{#arr}} {{/arr}} 就会遍历循环, 遍历循环的长度, 就是数组的长度。
</ul>
`;
var data = {
arr = [
{"name": "小明", "age": 12, "sex": "男"},
{"name": "小红", "age": 11, "sex": "女"},
{"name": "小强", "age": 13, "sex": "男"},
]
}
var domStr = Mustache.render(templateStr, data);
var container = document.getElementById('container');
container.innerHTML = domStr; 赋值操作
</script>
// mustache 库也可以使用boolean 值;
<div>
{{#m}}
<h1>您好!</h1> // <div></div> 中标签不显示
{{/m}}
</div>
data() {
return {
m: false;
}
}
-------------------------------------------------------------
mustache 库 是一个逻辑很弱的库。 没有vue 逻辑性强。
<template>
<div>
// 模板区域
</div>
</template>
--------------------------------------------------------------
但是在ES6 之前没有模板字符串, 可以使用
<script type="text/template">
// 模板区域不会被解析/ 渲染
</script>
在 mustache 语法中
{{# arr}} {{/arr}} 是一对, 开始和结束。
<script src="./jslib/mustache.js"></script>
// 在mustache 语法中; 还可以接受布尔值
<script>
var templateStr = `
{{#m}} // 开始节点
<h1>你好</h1>
{{/m}} // 结束节点
`
var data = {
m: false
}
var domStr = Musatche.render(tempalteStr, data);
var container = document.getElementById('container'); // 获取DOM 元素
container.innerHTMl = domStr;
</script>
更多推荐
已为社区贡献13条内容
所有评论(0)