微信小程序支付之Mustache语法,Vue深远分析

微信小程序  Mustache语法详解

前不久微信小程序相当红,对于前端开荒的技术员是个利好的新闻,这里最主要记录下微信小程序 
Mustache语法。

微信小程序中wxml里Mustache语法不可忽略,让自身那么些从前没搞过前端的iOS的一脸懵逼。。。上网查了查。。。记录一下。

Vue自身是一款特别不错的前端框架,通过简单的API提供快速的数据绑定和灵活的零件系统,其核激情想是
“数据驱动的零件系统”。Vue在进展实行插值管理和
绑定表达式时选用了一种叫Mustache模版引擎。
Mustache是大范围的Web模板引擎中的一种,最近几年随着前端的穿梭发展,基于javascript的模版引擎越多。如今盛行有
Mustache、Hogan、doT.js、JsRender、Kendo UI Templates等。

多年来微信小程序相当的火,对于前端开垦的程序猿是个利好的新闻,这里最首要记录下微信小程序 
Mustache语法。

小程序开拓的wxml里,用到了Mustache语法。所以,特别有不能缺少把Mustache商量下。

什么是Mustache?

Mustache是三个logic-less模板深入分析引擎,它是为了使用户分界面与事务数据分离而产生的,它能够转变特定格式的文书档案,平常是明媒正娶的HTML文书档案。当同三个模板中想要调用不一致的函数来渲染画面,在已经自定义好了的前提下,能够在渲染页面时对传播的参数举行手动决断。

例如小程序的wxml中的代码:

// 这里的{{ }}就是Mustache的语法。<text>{{userInfo.nickName}}</text>,

 {{keyName}} {{{keyName}}} {{#keyName}} {{/keyName}} {{^keyName}} {{/keyName}} {{.}} {{!comments}} {{>partials}}

一、Mustache 简介

Mustache是一个logic-less(轻逻辑)模板深入分析引擎,它的优势在于能够使用在Javascript、PHP、Python、Perl等各类编程语言中。

小程序支付的wxml里,用到了Mustache语法。所以,非常有不可或缺把Mustache切磋下。

怎么是Mustache?Mustache是贰个logic-less(轻逻辑)模板分析引擎,它是为着使用户分界面与事务数据(内容)分离而爆发的,它可以转换特定格式的文书档案,平时是标准的HTML文书档案。譬如小程序的wxml中的代码:

{{keyName}} 三种意况
  • 简易的变量替换:{{name}}

 var data = { "name": "weChat" }; Mustache.render("{{name}} is excellent.",data); 返回 weChat is excellent.
  • 变量含有html的代码,

 如:<br>、<tr>等而不想转义,可以在用{{&name}} var data = { "name" : "<br>weChat<br>" }; var output = Mustache.render("{{&name}} is excellent.", data); console.log; 返回:<br>weChat<br> is excellent. 去掉"&"的返回是转义为:<br>weChat<br> is excellent. 另外,你也可以用{{{ }}}代替{{&}}。
  • 假诺对象,还是能宣称其品质

 var data = { "name" : { "first" : "Chen", "last" : "Jackson" }, "age" : 18 }; var output = Mustache.render( "name:{{name.first}} {{name.last}},age:{{age}}", data); console.log; 返回:name:Chen Jackson,age:18

二、Mustache 语法:

Mustache 的沙盘语法很简短,就那么多少个:

  • {{keyName}}
  • {{#keyName}} {{/keyName}}
  • {{^keyName}} {{/keyName}}
  • {{.}}
  • {{<partials}}
  • {{{keyName}}}
  • {{!comments}}
    此地将以 javascript 应用为例进行介绍,先来看个 德姆o:


<script type=”text/javascript” src=”mustache.js”></script>
<script type=”text/javascript”>
var data = {
“company”: “Apple”,
“address”: {
“street”: “1 Infinite Loop Cupertino</br>”,
“city”: “California “,
“state”: “CA “,
“zip”: “95014 “
},
“product”: [“Macbook “,”iPhone “,”iPod “,”iPad “]
}
var tpl = ‘<h1> Hello {{company}}</h1> ‘;
var html = Mustache.render(tpl, data);
console.log( html )
</script>

//运行后 Console 输出:
<h1>Hello Apple</h1>

在 德姆o 中能够见到 data 是数额,tpl 是概念的模板,Mustache.render(tpl,
data)方法是用来渲染输出最后的 HTML 代码。
依傍 德姆o 来对语法做轻便的介绍:

怎么是Mustache?Mustache是一个logic-less(轻逻辑)模板深入分析引擎,它是为了使用户分界面与事务数据(内容)分离而发出的,它能够更动特定格式的文书档案,经常是正规的HTML文书档案。比如小程序的wxml中的代码:

{{userInfo.nickName}},这里的{{ }}就是Mustache的语法。

{{#keyName}} {{/keyName}}

以#起头、以/结束表示区块,它会依据近年来上下文中的键值来对区块实行叁遍或频仍渲染。它的效果与利益很强劲,里面还足以加入类似if、foreach的意义。

var data = { "stooges" : [ { "name" : "Moe" }, { "name" : "Larry" }, { "name" : "Curly" };var output = Mustache.render("{{#stooges}}<b>{{name}}</b>{{/stooges}}", data);console.log;返回:<b>Moe</b> <b>Larry</b> <b>Curly</b>

{{keyName}}

{{}}就是 Mustache 的标示符,花括号里的 keyName
表示键名,那句的功能是直接出口与键名相称的键值,比如:

var tpl = ‘{{company}}’;
var html = Mustache.render(tpl, data);
//输出:
澳门葡京,Apple

{{userInfo.nickName}},这里的{{ }}就是Mustache的语法。

1、Mustache的模版语法极粗略,就那么多少个:

{{^keyName}} {{/keyName}} 万分输出

该语法与{{#keyName}} {{/keyName}}类似,区别在于它是当keyName值为null,
undefined, false时才渲染输出该区块内容。例如:

var data = { "name" : "<br>weChat<br>" }; var tpl = ‘{{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}}’; var output = Mustache.render(tpl, data);返回:没找到 nothing 键名就会渲染这段

{{#keyName}} {{/keyName}}

以#千帆竞发、以/结束表示区块,它会依据当前上下文中的键值来对区块进行一回或频仍渲染,举个例子改写下
德姆o 中的 tpl:

var tpl = ‘{{#address}}
<p>{{street}},{{city}},{{state}}</p> {{/address}}’;
var html = Mustache.render(tpl, data);
//输出:
<p>1 Infinite Loop Cupertino</br>,California,CA</p>

注意:如果{{#keyName}} {{/keyName}}中的 keyName 值为 null, undefined,
false;则不渲染输出任何内容。

1、Mustache的沙盘语法很简短,就那么多少个:

{{keyName}}

{{.}}表示枚举,用于循环输出整个数组,例如:
var data = { "product": ["Macbook ","iPhone ","iPod ","iPad "] } var tpl = '{{#product}} <p>{{.}}</p> {{/product}}'; var html = Mustache.render(tpl, data);返回:<p>Macbook </p> <p>iPhone </p> <p>iPod </p> <p>iPad </p>

{{^keyName}} {{/keyName}}

该语法与{{#keyName}} {{/keyName}}类似,不相同在于它是当 keyName 值为
null, undefined, false 时才渲染输出该区块内容。

var tpl = {{^nothing}}没找到 nothing 键名就能够渲染那{{/nothing}};
var html = Mustache.render(tpl, data);
//输出:
没找到 nothing 键名就能够渲染这段

{{keyName}}

微信小程序支付之Mustache语法,Vue深远分析。{{{keyName}}}

{{! }}表示注释
 {{!这里是注释}}

{{.}}

{{.}}表示枚举,能够循环输出整个数组,举例:
var tpl = ‘{{#product}} <p>{{.}}</p> {{/product}}’;
var html = Mustache.render(tpl, data);
//输出:
<p>Macbook </p>
<p>iPhone </p>
<p>iPod </p>
<p>iPad </p>

{{{keyName}}}

{{#keyName}} {{/keyName}}

{{>partials}}

以>开头表示子模块,当协会比较复杂时,大家能够采纳该语法将复杂的布局拆分成多少个小的子模块。

 var tpl = "<h1>{{namme}}</h1> <ul>{{>msg}}</ul>" var partials = {msg: "{{#msg}}<li>{{sex}}</li><li>{{age}}</li><li>{{hobit}}</li>{{/msg} var html = Mustache.render(tpl, data, partials); //输出: <h1>xiaohua</h1> 

{{>partials}}

以>开端表示子模块,如{{>
address}};当协会相比较复杂时,大家得以行使该语法将复杂的构造拆分成多少个小的子模块,比如:

var tpl = “<h1>{{company}}</h1>
<ul>{{>address}}</ul>”;
var partials = {address:
“{{#address}}<li>{{street}}</li><li>{{city}}</li><li>{{state}}</li><li>{{zip}}</li>{{/address}}”};
var html = Mustache.render(tpl, data, partials);

//输出:
<h1>Apple</h1>
<ul>
<li>1 Infinite Loop Cupertino</br></li>
<li>California</li>
<li>CA</li>
<li>95014</li>
</ul>

{{#keyName}} {{/keyName}}

{{^keyName}} {{/keyName}}

{{{data}}}

{{data}} 输出会将等特殊字符转译,假如想保持内容原样输出能够选用{{{}}},

 var tpl = '{{#msg}} <p>{{{age}}}</p> {{/msg}}' //输出: <p>22</p>

小程序 这么多大概就能够用了,借使开掘怎么别的的再革新。。。

{{{keyName}}}

{{keyName}}输出会将等特殊字符转译,假诺想保持内容原样输出能够采纳{{{}}},比方:

var tpl = ‘{{#address}} <p>{{{street}}}</p>
{{/address}}’
//输出:
<p>1 Infinite Loop Cupertino</br></p>

{{^keyName}} {{/keyName}}

{{.}}

{{!comments}}

!表示注释,注释后不会渲染输出任何内容。

{{!这里是注释}}
//输出:

从下边包车型大巴Api能够看看Mustache模板引擎在安排上还是相比轻便的,同期并不曾看似if-else这种重逻辑式的编码,一切都以用竹签来解决.Vue在数额插值和表明式绑定上都用了Mustache语法,下一章我们会就那部分的剧情详实介绍下.

{{.}}

{{!comments}}

{{!comments}}

{{>partials}}

{{>partials}}

1、{{keyName}}

1、{{keyName}}

⑴ 轻便的变量替换:{{name}}

⑴ 轻易的变量替换:{{name}}

var data = { “name”: “weChat” };

var data = { “name”: “weChat” };

Mustache.render(”{{name}} is excellent.”,data);

Mustache.render(”{{name}} is excellent.”,data);

返回 weChat is excellent.

返回 weChat is excellent.

⑵ 变量含有html的代码,如:

⑵ 变量含有html的代码,如:

、等而不想转义,能够在用{{&name}}

、等而不想转义,能够在用{{&name}}

vardata = {

var data = {

       "name" : "
weChat
"

     };

var output = Mustache.render("{{&name}} is excellent.", data);

console.log(output);

“name”:”

返回:

weChat

weChat
is excellent.

 去掉”&”的回来是转义为:

};

weChat
is excellent.

varoutput = Mustache.render(“{{&name}} is excellent.”, data);

其它,你也得以用{{{ }}}取代{{&}}。

console.log(output);

⑶ 假若对象,还是能宣称其属性

返回:

var data = {

       "name" : {

       "first" : "Chen",

       "last" : "Jackson"

       },

       "age" : 18

     };

var output = Mustache.render(

      "name:{{name.first}} {{name.last}},age:{{age}}", data);

console.log(output);

weChat

返回:name:Chen Jackson,age:18

is excellent.

 2、{{#keyName}} {{/keyName}}

去掉”&”的回来是转义为:

以#千帆竞发、以/截至表示区块,它会基于当下上下文中的键值来对区块进行一回或频仍渲染。它的效果很庞大,有邻近if、foreach的成效。

weChat

var data = {

       "stooges" : [ {

         "name" : "Moe"

       }, {

         "name" : "Larry"

       }, {

         "name" : "Curly"

       } ]

     };



var output = Mustache.render("{{#stooges}}{{name}}{{/stooges}}",

         data);

console.log(output);

is excellent.

返回:Moe

其它,你也足以用{{{ }}}取代{{&}}。

      Larry

⑶ 假使对象,还可以宣称其本性

      Curly

vardata = {

3、{{^keyName}} {{/keyName}}

“name”: {

该语法与{{#keyName}} {{/keyName}}类似,不一致在于它是当keyName值为null,
undefined, false时才渲染输出该区块内容。比如:

“first”:”Chen”,

var data = {

       "name" : "
weChat
"

     };

  var tpl = ‘{{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}}';

  var output = Mustache.render(tpl, data);

“last”:”Jackson”

回去:没找到 nothing 键名就能够渲染这段

},

4、{{.}}

“age”: 18

    {{.}}表示枚举,能够循环输出整个数组,比如:

};

 var data = {

  "product": ["Macbook ","iPhone ","iPod ","iPad "]

  }

  var tpl = '{{#product}}

{{.}}

{{/product}}';



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

varoutput = Mustache.render(

返回:

“name:{{name.first}} {{name.last}},age:{{age}}”, data);

Macbook

console.log(output);

iPhone

返回:name:Chen Jackson,age:18

iPod

2、{{#keyName}} {{/keyName}}

iPad

以#始于、以/结束表示区块,它会依靠当下上下文中的键值来对区块进行二回或频仍渲染。它的职能很庞大,有类似if、foreach的作用。vardata
= {

5、{{!  }}表示注释

“stooges”: [ {

6、{{>partials}}

“name”:”Moe”

以>起先表示子模块,当协会相比复杂时,大家得以接纳该语法将复杂的结构拆分成多少个小的子模块。

}, {

 感激阅读,希望能援救到大家,感谢我们对本站的支撑!

“name”:”Larry”

您大概感兴趣的小说:

  • 微信小程序 条件渲染详解
  • 微信小程序 rpx
    尺寸单位详细介绍
  • 微信小程序
    POST恳求(互连网央求)详解及实例代码
  • 微信小程序行使第三方库Immutable.js实例详解
  • 微信小程序 loading
    组件实例详解
  • 微信小程序 navigation
    API实例详解
  • 微信小程序
    决断手提式有线电话机号的落实代码

}, {

“name”:”Curly”

} ]

};

varoutput = Mustache.render(“{{#stooges}}{{name}}{{/stooges}}”,

data);

console.log(output);

返回:Moe

Larry

Curly

3、{{^keyName}} {{/keyName}}

该语法与{{#keyName}} {{/keyName}}类似,分化在于它是当keyName值为null,
undefined, false时才渲染输出该区块内容。比如

vardata = {

“name”:”

weChat

};

vartpl = ‘{{^nothing}}没找到 nothing 键名就能够渲染这段{{/nothing}}’;

varoutput = Mustache.render(tpl, data);

回来:没找到 nothing 键名就能渲染这段

4、{{.}}

{{.}}表示枚举,能够循环输出整个数组,例如:

vardata = {

“product”: [“Macbook “,”iPhone “,”iPod “,”iPad “]

}

vartpl ='{{#product}}

{{.}}

{{/product}}’;

varhtml = Mustache.render(tpl, data);

返回:

Macbook

iPhone

iPod

iPad

5、{{!  }}表示注释

6、{{>partials}}

参谋小说:

http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mustache-js/

http://mustache.github.com/mustache.5.html

http://ued.xinyou.com/2012/07/mustache\_5\_document.html

来自:http://www.iinterest.net/2012/09/12/web-template-engine-mustache/

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website