微信小程序  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 相关文章推荐
javascript 写类方式之七
Jul 05 Javascript
JQuery 学习笔记 选择器之一
Jul 23 Javascript
jquery里的each使用方法详解
Dec 22 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
vue的项目如何打包上线
Apr 13 Vue.js
利用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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
深入理解php的MySQL连接类
2013/06/07 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
JS与框架页的操作代码
2010/01/17 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
Python基础学习之常见的内建函数整理
2017/09/06 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
python最长回文串算法
2018/06/04 Python
python实现维吉尼亚算法
2019/03/20 Python
解决Django中多条件查询的问题
2019/07/18 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
中专生自我鉴定
2013/12/17 职场文书
临床医师个人自我评价
2014/04/06 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
三下乡活动心得体会
2016/01/23 职场文书
详解Python牛顿插值法
2021/05/11 Python
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
Python中的嵌套循环详情
2022/03/23 Python
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers