微信小程序  Mustache语法详细介绍


Posted in Javascript onOctober 27, 2016

微信小程序  Mustache语法详解

最近微信小程序非常火,对于前端开发的程序员是个利好的消息,这里主要记录下微信小程序  Mustache语法。

小程序开发的wxml里,用到了Mustache语法。所以,非常有必要把Mustache研究下。

什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的HTML文档。比如小程序的wxml中的代码:

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

1、Mustache的模板语法很简单,就那么几个:

{{keyName}}

{{{keyName}}}

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

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

{{.}}

{{!comments}}

{{>partials}}

1、{{keyName}}

⑴ 简单的变量替换:{{name}}

var data = { "name": "weChat" };

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

返回 weChat is excellent.

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

、等而不想转义,可以在用{{&name}}

var data = {

       "name" : "
weChat
"

     };

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

console.log(output);

返回:

weChat
is excellent.

 去掉"&"的返回是转义为:

weChat
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(output);

返回:name:Chen Jackson,age:18

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

以#开始、以/结束表示区块,它会根据当前上下文中的键值来对区块进行一次或多次渲染。它的功能很强大,有类似if、foreach的功能。

var data = {

       "stooges" : [ {

         "name" : "Moe"

       }, {

         "name" : "Larry"

       }, {

         "name" : "Curly"

       } ]

     };

 

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

         data);

console.log(output);

返回:Moe

      Larry

      Curly

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

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

var data = {

       "name" : "
weChat
"

     };

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

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

返回:没找到 nothing 键名就会渲染这段

4、{{.}}

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

var data = {

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

  }

  var tpl = '{{#product}}

{{.}}

{{/product}}';

 

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

返回:

Macbook

iPhone

iPod

iPad

5、{{!  }}表示注释

6、{{>partials}}

以>开始表示子模块,当结构比较复杂时,我们可以使用该语法将复杂的结构拆分成几个小的子模块。

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Jquery 动态添加按钮实现代码
May 06 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
vue Element左侧无限级菜单实现
Jun 10 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 #Javascript
JavaScript登录验证码的实现
Oct 27 #Javascript
微信小程序  自定义创建详细介绍
Oct 27 #Javascript
vue中渐进过渡效果实现
Oct 27 #Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 #Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 #Javascript
vue的props实现子组件随父组件一起变化
Oct 27 #Javascript
You might like
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php allow_url_include的应用和解释
2010/04/22 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
python学习手册中的python多态示例代码
2014/01/21 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
python实现屏保计时器的示例代码
2018/08/08 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
植物选择:Botanic Choice
2017/02/15 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
集体备课反思
2014/02/12 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript