Mustache学习笔记

qylost 发布于2019-08-26 14:00 / 1853人阅读

摘要：一个返回值渲染后的例那年那夏我是，年龄结果我是那年那夏，年龄的思想的核心是标签和。从上面的代码中可以看到定义模板时，使用了这样的标记，这就是的标签，只不过它用替代了，以免跟标签的混淆。

Mustache学习笔记

Mustache 是一款基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用，在前后端分离的技术架构下面，前端模板引擎是一种可以被考虑的技术选型，随着重型框架（AngularJS、ReactJS、Vue）的流行，前端的模板技术已经成为了某种形式上的标配，Mustache 的价值在于其稳定和经典：

主页：https://github.com/janl/musta...

文档：https://mustache.github.io/mu...

1.出现的问题
在使用中会有可能在页面渲染时会出现{{xxx}}这种标签，虽然会被页面立即替换掉，但是对于用户呈现来讲，依然不太友好

2.具体使用方式
从git hub上获取相关的mustache.js文件，在页面的head标签内引用Jquery.js 和Mustache.js两个脚本文件

简介
3.渲染
渲染形式单一：var view = Mustache.render(template,obj);

参数：一个是模板html，一个是数据源对象。

view：一个返回值（渲染后的html ）

例：

var obj={name:"那年那夏",age:"23"}

var template="我是{{name}}，年龄{{age}}"

var view = Mustache.render(template,obj);

$("body").html(view);

结果：我是那年那夏，年龄23

4.mustache的思想
mustache的核心是标签和logic-less。从上面的代码中可以看到定义模板时，使用了{{name}}这样的标记，这就是mustache的标签，只不过它用{{}}替代了<>，以免跟html标签的<>混淆。logic-less，可以翻译为轻逻辑，因为在定义模板的时候不会用到if-else，不会有循环式的编码，一切都用标签来解决，它的标签非常简单，但是能应付所有场景，只要用以下几个标签几乎就能解决所有的问题：

{{{prop}}}

5.mustache标签介绍
1）{{person}}变量
如上面例子中可以直接使用

嵌套使用

var obj={ "name": { "first": "xx,", "last": "yy," }, "age": "23" }

var view={{name.first}} {{name.last}} {{age}}

输出：xx,yy,23

2）{{{prop}}} 带有HTML的变量
在{{prop}}中的html会直接转义，如果不想转义则使用{{{name}}}或{{&name}}

如：var obj={name:"那年那夏",age:"23"}

var template="我是{{{name}}}，年龄{{age}}"

var view = Mustache.render(template,obj);

$("body").html(view);

结果：我是那年那夏，年龄23

3){{#prop}}{{/prop}} 循环
1.遍历数组

数组循环的时候可以用.作为下标

var obj={ "arr": ["1", "2", "3", "4"] };

var template="{{#arr}} {{.}} {{/arr}}"

输出：1234

2.遍历对象

var obj={ "str": [ { "name": "xx，" }, { "name": "yy，" }, { "name": "zz" } ] };

var template="{{#str}} {{name}} {{/str}}"

输出xx,yy,zz

3,False和空的list

在以上代码块中，如果str这个key存在，并且有一个值是false或者一个空的列表，包含在块之间的元素不会做任何显示的.同样如果str是一个列表，如果它为空，标签内部的内容也是不会被显示出来的.

如：var obj={ “str”: false } ;

var view="xxx{{#str}yyy{{/str}}}"

输出xxx

4){{^prop}} {{/prop}}当 prop值为 null, undefined, false 时才渲染输出该区块内容。
如：var obj={ “str”: false } ;

var view="xxx{{^str}yyy{{/str}}}"

输出xxxyyy

5)判断使用{{#prop}}{{/prop}}{{^prop}} {{/prop}}
if else

{{#prop}} ... {{/prop}}

{{^prop}} ... {{/prop}}

布尔判断

当对象没有值时你可能不希望展示{{#prop}} ... {{/prop}}

数组的布尔判断

当一个数组没有任何值的时候，可能会希望不做任何的显示，所以需要这个判断{{#prop}} ... {{/prop}}

Lambdas

当Key的值是一个可以被调用的对象，譬如是一个函数或者一个lambda，该对象将会被调用并且传递标签包含的文本进去

var obj={ "name": "Willy",

"prop": function(){

                 return function(text){      return "" + text + ""    }

           }

}

var view={{#prop}} {{name}} is xxx. {{/prop}}

输出

我们看到prop是一个可以被调用的函数他当标签使用的时候会被再次调用，并且包在其中的其他标签也会被转义执行，这个特性，可以用来做很多很多的事情.

6.{> prop}}Partials的使用
Partials 标签开始是以一个大于号开始,像这样{{> box}}.

Partials在运行期被渲染 (相对于编译期渲染而言),因此可以使用它来做一些递归，可以避免无限的循环.

例：

var tpl = "

{{>msg}}"

var partials = {msg: "{{#msg}}

{{/msg}

var html = Mustache.render(tpl, data, partials);

//输出：

xiaohua

female

22

reading

7){{!prop}} 注释（没啥用

Today {{! ignore me }}

输出

Today

8)核心方法
Mustache.parse(template);//预解析（可选步骤）

Mustache.render(template, obj);

模板既然有好处，也有坏处。就是编译模板需要时间，所以在我们已知会使用某个模板的前提下，我们可以预先编译好这个模板，以便后面的使用。

参考说明：https://www.cnblogs.com/yaozh...

私有云海外云主机学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109959.html

Vue2.5笔记：Vue中的模版

摘要：模版语法中的模版是基于的模版语法，所有的模版都是合法的，所以能被遵循规范的浏览器和解析器解析。表达式模版中不仅仅可以进行简单的数据绑定操作，我们还可以在模版中进行简单的表达式。我们也简单的叙述了模版编译的整个流程。我们在上一篇说到如何把 Vue 实例中的数据显示到视图中，就会需要用到我们的模版，我们只是简单的使用了一些，模版其实还有很多其他的特性。今天我们就来看看模版的其他特性。模...

shevy 2019-08-23 12:11 评论0 收藏0
vue入门笔记体系（五）vue指令

摘要：指令指令带有前缀，以表示它们是提供的特殊特性。添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。差别在哪里将特性名转换为从开始支持语法糖，会扩展成一个更新父组件绑定值的侦听器。 vue指令指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。 v-text {{msg}} v-html //渲染HTML文本，更新元素的 innerHTML 。注意：内...

myshell 2019-08-23 10:36 评论0 收藏0
[译] 用 Webpack 武装自己

摘要：现在来做一个的入口让我们在文件里进行的配置。如果想要显示它们，我们可以在运行的时候使用你还可以使用，在改变代码的时候自动进行打包。新建文件，里面是一段，告诉使用进行预处理。本文译自：Webpack your bags这篇文章由入门到深入的介绍了webpack的功能和使用技巧，真心值得一看。由于我英语水平有限，而且很少翻译文章，所以文中的一些语句在翻译时做了类似语义的转换，望谅解。...

Tychio 2019-08-19 18:15 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

baoxl 2019-08-30 13:47 评论0 收藏0