layui学习
程序员文章站
2022-07-02 20:22:41
...
目录
2、定义模块：layui.define([mods],callback)
3、加载所需模块：layui.use([mods],callback)
参考网站：http://www.layui.com/doc/
这篇文章由于自己的快速学习，所以主要是复制参考网页的重点来帮助自己记忆。
一、底层方法
1、全局配置：layui.config(options)
作用：在使用layui模块之前可以全局化配置一些参数。
使用：（未使用，mark）
layui.config({
dir: '/res/layui/' //layui.js 所在路径（注意，如果是script单独引入layui.js，无需设定该参数。），一般情况下可以无视
,version: false //一般用于更新模块缓存，默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值，如：201610
,debug: false //用于开启调试模式，默认false，如果设为true，则JS模块的节点会保留在页面
,base: '' //设定扩展的Layui模块的所在目录，一般用于外部模块扩展
});
2、定义模块：layui.define([mods],callback)
作用：可定义一个模块。mods：定义的模块所依赖的模块，callback：会调用函数，返回一个exports参数，输出该模块的接口（也就是定义模块）。
使用：
//1.不使用mods参数，直接使用回调方法定义一个模块
//define：定义模块的方法
layui.define(function(exports){
/*
* exports参数:可定义一个模块
*
* demo：模块名字
* function():回调方法
*/
exports('demo', function(){
alert('Hello World!');
});
});
layui.demo();//调用定义的模块
//2.使用mods参数，设置该模块所依赖的模块来使用回调方法定义一个模块
layui.define("layer",function(exports){ //可使用数组来依赖多个模块：["layer","laypage"]
exports('demo', function(){
alert('Hello World!');
});
});
//需要通过use()来加载layer模块，之后在该回调方法中调用定义的demo方法
layui.use("layer",function(){
layui.demo();
})3、加载所需模块：layui.use([mods],callback)
作用：layui的内置模块，不是一开始就加载的，需要通过该方法来加载内置模块。
扩展：（目前只做了解）如果mods中需要包含目录，需使用extends定义别名。
使用：
/*
* 3.使用模块
*/
layui.use(['layer','laypage'],function(){ //指定加载的模块
//通过对象赋值的方式来获取模块接口（当然，不使用对象赋值也可以直接使用，但是为了规范吧）
var layer = layui.layer
,laypage = layui.laypage;
//使用layer模块的msg()
layer.msg("你好");
});
//强烈不推荐下面的做法，如果你的业务代码实在模块加载完成之前执行的，则会存在报错风险
var laypage, laydate;
layui.use(['laypage', 'laydate'], function(){
laypage = layui.laypage;
laydate = layui.laydate;
});
4、其他的方法
| 方法/属性 | 描述 |
|---|---|
| layui.link(href) | 动态下载css，href即为css路径。注意：该方法并非是你使用Layui所必须的，它一般只是用于动态加载你的外部CSS文件。 |
| layui.data(table, settings) | localStorage 持久化存储、数据会永久存在，除非物理删除。其中参数 table 为表名，settings是一个对象，用于设置key、value。（未理解） |
| layui.sessionData(table, settings) | sessionStorage 会话性存储、页面关闭后即失效。注：layui 2.2.5 新增。（未理解） |
| layui.device(key) | 获取设备信息，参数key是可选的，在layui mobile模块中的作用可谓举足轻重。该方法返回了丰富的设备信息。（详情见官网） |
| layui.cache | 静态属性。获得一些配置及临时的缓存信息 |
| layui.extend(options) | 拓展一个模块别名，如：layui.extend({test: '/res/js/test'}) |
| layui.each(obj, fn) | 对象（Array、Object、DOM对象等）遍历，可用于取代for语句 |
| layui.getStyle(node, name) | 获得一个原始DOM节点的style属性值，如：layui.getStyle(document.body, 'font-size') |
| layui.img(url, callback, error) | 图片预加载 |
| layui.sort(obj, key, desc) | 将数组中的对象按某个成员重新对该数组排序，如：layui.sort([{a: 3},{a: 1},{a: 5}], 'a') |
| layui.router() | 获得location.hash路由，目前在Layui中没发挥作用。对做单页应用会派上用场。 |
| layui.hint() | 向控制台打印一些异常信息，目前只返回了error方法：layui.hint().error('出错啦') |
| layui.stope(e) | 阻止事件冒泡 |
| layui.onevent(modName, events, callback) | 自定义模块事件，属于比较高级的应用。有兴趣的同学可以阅读layui.js源码以及form模块 |
| layui.event(modName, events, params) | 执行自定义模块事件，搭配onevent使用 |
| layui.factory(modName) | 用于获取模块对应的 define 回调函数 |
二、页面元素（认识）
需要的页面元素，可直接去官网搜索，目前还没有什么无法理解的地方。（持续更新）
三、模块规范
1、layui的模块是基于layui.js内部实现的模块异步加载方式。
2、预先加载，也就是先在最外层定义一个layui.use()，将所有的js代码都包括在里面，这样可以防止多次重复的定义layui.use()
3、按需加载（不推荐），在需要使用某个模块的时候再去定义layui.use()来加载模块，可满足对网站的性能有极致的要求的人。
注意：如果你的 JS 中需要大量用到模块，我们并不推荐你采用这种加载方式（按需加载），因为这意味着你要写很多 layui.use()，代码可维护性不高。 建议还是采用：预先加载。即一个JS文件中，写一个use即可。
4.使用扩展模块：
/*
* 1、test.js代码
*/
//使用define()定义模块
layui.define(function(exports){
//声明一个对象
var obj= {
//hello属性指定一个方法
hello:function(str){
alert("hello "+(str||"mymod"));
}
}
//输出借口（输出定义的模块，模块名为mymod）
exports("mymod",obj);
});
/*
* 2、html页面代码
*/
//配置test.js的路径
layui.config({
base:"js/" //test.js的根目录
}).extend({
mymod:"test" //test.js所在的目录，且指定模块
});
//使用拓展模块
layui.use(['mymod'], function(){
var mymod = layui.mymod;
mymod.hello('World!'); //弹出 Hello World!
});四、页面元素（使用）
1、栅格、后台布局
1.1、介绍：
- 栅格（可以看作为使用div的表格），layui的栅格采用了12等分。
- 内置了四种适配处理：移动设备（ms）、平板（sm）、中尺寸桌面（md）、大尺寸桌面（lg）
- layui-row定义行、layui-col-md*定义列，且放在行内（md为可选、*为12等分中的几分，详见官网）
1.2、响应式规则
对不同尺寸的屏幕进行适配处理：
| 超小屏幕 (手机<768px) |
小屏幕 (平板≥768px) |
中等屏幕 (桌面≥992px) |
大型屏幕 (桌面≥1200px) |
|
|---|---|---|---|---|
| .layui-container的值 | auto | 750px | 970px | 1170px |
| 标记 | xs | sm | md | lg |
| 列对应类 * 为1-12的等分数值 |
layui-col-xs* | layui-col-sm* | layui-col-md* | layui-col-lg* |
| 总列数 | 12 | |||
| 响应行为 | 始终按设定的比例水平排列 | 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列 | ||
将栅格放入一个带有 class="layui-container" 的特定的容器中：以便在小屏幕以上的设备中固定宽度，让列可控。
将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中：那么宽度将不会固定，而是 100% 适应。
2、颜色
2.1、内置7种颜色
- 赤色：class="layui-bg-red"
- 橙色：class="layui-bg-orange"
- 墨绿：class="layui-bg-green"
- 藏青：class="layui-bg-cyan"
- 蓝色：class="layui-bg-blue"
- 雅黑：class="layui-bg-black"
- 银灰：class="layui-bg-gray"
2.2、颜色设计感
layui的其他常用颜色：常用主色（象征包容的墨绿色为主色调）、场景色（比较亮丽的颜色）、极简中性色（灰色、用于背景边框）。
3、图标
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"><i/>
//laui-icon：使用图标就需要该类
//layui-icon-face-smile：一个笑脸的图标，如果需要其他图标就去官网查询
//style：使用了layui的图标也可以通过style来设置颜色、大小等属性
4、动画
<div class="layui-anim layui-anim-up layui-anim-loop"></div>
//layui-anim：这个是必须的
//layui-anim-up：向上弹出的动画，可替换
//layui-anim-loop：循环，重复动画
5、按钮
提示：多种不同样式可以根据正常逻辑随意搭配
<button class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
//一个带图标的按钮
<button class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon">ဂ</i>
</button>5.1、主题：（6种）
| 原始 | class="layui-btn layui-btn-primary" |
| 默认 | class="layui-btn" |
| 百搭 | class="layui-btn layui-btn-normal" |
| 暖色 | class="layui-btn layui-btn-warm" |
| 警告 | class="layui-btn layui-btn-danger" |
| 禁用 | class="layui-btn layui-btn-disabled" |
5.2、尺寸（4种）
| 尺寸 | 组合 |
|---|---|
| 大型 | class="layui-btn layui-btn-lg" |
| 默认 | class="layui-btn" |
| 小型 | class="layui-btn layui-btn-sm" |
| 迷你 | class="layui-btn layui-btn-xs" |
5.3、圆角：layui-btn-radius
5.4、按钮组、按钮容器：
//按钮组：将多个按钮按组分在一起
<div class="layui-btn-group">
<button class="layui-btn">增加</button>
<button class="layui-btn">编辑</button>
<button class="layui-btn">删除</button>
</div>
//按钮容器（...）
//尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器
<div class="layui-btn-container">
<button class="layui-btn">按钮一</button>
<button class="layui-btn">按钮二</button>
<button class="layui-btn">按钮三</button>
</div>
6、表单
在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。
（请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）
//基本格式
<div class="layui-form-item">
<label class="layui-form-label">标签区域</label>
<div class="layui-input-block">
原始表单元素区域
</div>
</div>
//输入框：
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
//required：注册浏览器所规定的必填字段
//lay-verify：注册form模块需要验证的类型
//class="layui-input"：layui.css提供的通用CSS类
//如果需要页面的效果，则必须加载form模块
<script>
//Demo
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>7、导航条
导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边。
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li><!-- layui-this：指定当前页面分类 -->
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//…
});
</script>垂直导航在ul中需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side
8、tab选项卡
类似于简便行型的导航条，与导航条同样依赖于element模块
9、进度条
进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。依赖element模块。
10、面板
一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等
分为：卡片面板、折叠面板。依赖于element模块
11、表格
<table class="layui-table" lay-skin="line">
<!-- 设置列的宽度 -->
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
行边框表格（内部结构参见右侧目录“常规用法”）
</table>
<table class="layui-table" lay-skin="row">
列边框表格（内部结构参见右侧目录“常规用法”）
</table>
<table class="layui-table" lay-even lay-skin="nob">
无边框表格（内部结构参见右侧目录“常规用法”）
</table>
<table class="layui-table" lay-size="sm">
小尺寸表格（内部结构参见右侧目录“常规用法”）
</table>
<table class="layui-table" lay-size="lg">
大尺寸表格（内部结构参见右侧目录“常规用法”）
</table>
12、徽章
- 小圆点，通过 layui-badge-dot 来定义，里面不能加文字
- 椭圆体，通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式
- 边框体，通过 layui-badge-rim 来定义
- 例：<span class="layui-badge-rim">Hot</span>
13、时间线
- 图标可以任意定义（但并不推荐更改）
- 标题区域并不意味着一定要加粗
- 内容区域可*填充。
五、内置模块（重点）
1、弹出层（layer）
由于 layer 在 layui 体系中的位置比较特殊，甚至让很多人都误以为 layui = layer ui，所以再次强调 layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以至今仍把她作为独立组件来维护。
1.1、layer的参数：
- type：层类型
- title：标题
- content：内容
- skin：皮肤
- area：宽高
- offset：坐标
- icon：提示图标
- btn：提示按钮
- btnAlign：按钮排列
- closeBtn：右上关闭
- shade：遮罩
- shadeClose
- time：自动关闭
- id：唯一id
- anim：动画
- isOutAnim：关闭动画
- maxmin：最大小化
- fixed：是否固定
- resize：是否允许拉伸
- resizing：正在拉伸
- scrollbar：屏蔽滚动
- maxWidth：最大宽
- maxHeight：最大高
- zIndex：层叠值
- move：拖拽元素
- moveOut：拖出
- moveEnd：回调
- tipsTips：参数
- tipsMore：允许多tips
- success：弹出后回调
- yes：确定回调
- cancel：关闭回调
- end：销毁后回调
- full/min/restore
1.2、layer的方法
- layer.config(option) - 初始化全局配置：它不仅可以配置一些诸如路径、加载的模块，甚至还可以决定整个弹层的默认参数。
- layer.ready(callback) - 初始化就绪：当你在页面一打开就要执行弹层时
- layer.open(options) - 原始核心方法：不管是使用哪种方式创建层，都是走layer.open()
- layer.alert(content,options,yes) - 普通信息框：一般用于对用户造成比较强烈的关注，类似系统alert，但却比alert更灵便。
- layer.confirm(content,options,yes,cacel) - 询问框：类似系统confirm，但却远胜confirm。
- layer.msg(content,options,end) - 提示框：它简单，而且足够得自觉，它不仅占据很少的面积，而且默认还会3秒后自动消失。
- layer.load(icon,options) - 加载层：type:3的深度定制。load默认是不会自动关闭的，因为你一般会在ajax回调体中关闭它。
- layer.tips(content,follow,options) - tips层：type:4的深度定制。默认是在元素右边弹出。
- layer.close(index) - 关闭特定层：每一种弹层调用方式，都会返回一个index，将这个index作为参数传入就可关闭指定层了
- layer.closeAll(type) - 关闭所有层：它会销毁掉当前页所有的layer层。当然，如果你只想关闭某个类型的层，那么你可以传入参数，dialog（信息框）、page（页面层）、iframe（iframe层）、loading（加载层）、tips（tips层）
- layer.style(index,cssStyle) - 重新定义层样式：该方法对loading层和tips层无效。参数index为层的索引，cssStyle允许你传入任意的css属性
- layer.title(title,index) - 改变层标题：
- layer.getChildFrame(selector,index) - 获取iframe的DOM：当你试图在当前页获取iframe页的DOM元素时。
扩展： layer.open({ type: 2, content: 'test/iframe.html', success: function(layero, index){//成功时执行的回调。layero代表该层的DOM var body = layer.getChildFrame('body', index);//获取body中的页面元素 //可以通过这样来调用子页面（层）的方法 var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法： iframeWin.method();//执行子页面方法 console.log(body.html()) //得到iframe页的body内容 body.find('input').val('Hi，我是从父页来的') } }); - layer.getFrameIndex(windowName) - 获取特定iframe层的索引（通过iframe的name）
//假设这是iframe页。window.name：获得当前iframe的名字 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index); //再执行关闭 -
layer.iframAuto(index) - 指定ifram自适应：调用该方法时，iframe层的高度会重新进行适应
-
layer.iframeUrl(index,url) - 重置特定iframe的url：使用方式：layer.iframeSrc(index, 'http://sentsin.com')
-
layer.setTop(layero) - 置顶当前窗口
-
layer.full()、layer.min()、layer.restore() - 手工执行最大、小、全屏化
-
layer.prompt(options,yes) - 输入层：yes携带value 表单值 index 索引 elem 表单元素
-
layer.tab(options) - tab层：弹出tab层，可以有多个选项卡
-
layer.photos(options) - 相册层：photos支持传入json和直接读取页面图片两种方式。
2、日期与时间选择（laydate）
全面重写的 layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。
核心方法：laydate.render(options)设置基础参数，也可通过laydate.set(options)来设置全局基础参数
2.1、laydate基础参数：
- elem：绑定元素，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象。（必填）
- type：控件选择类型（year年选择器、month年月选择器、date日期选择器、time时间选择器、datetime日期时间选择器）
- range：开启左右面板范围选择，可以显示某个时间至下一个时间，默认使用“-”分隔
- format：自定义格式，默认值“yyyy-MM-dd”
- value：初始值，默认值“new Date()”，必须传入符合format格式的值（format可以自定义）
- inInitValue：初始值填充，控制是否自动向元素填充初始值（需配合 value 参数使用）（初步本地测试，结果无效）
- min/max：设置最小、最大范围的日期时间，不在范围内的将不可选中。这两个参数的赋值非常灵活。
- show：默认显示，设置是否显示日期选择控件，通常用于外部事件调用控件
- position：定位方式，三种可选值（absolute、fixed、static）
- zIndex：层叠顺序，一般用于解决与其它元素的互相被遮掩的问题。如果 position 参数设为 static 时，该参数无效。
- showBottom：是否显示底部栏，如果设置 false，将不会显示控件的底部栏区域
- btns：工具组，默认值“['clear', 'now', 'confirm']”，右下角显示的按钮，会按照数组顺序排列，内置可识别的值有：clear、now、confirm
- lang：语言，内置了两种语言版本：cn（中文版）、en（国际版，即英文版）。并没有开放自定义文字，避免繁琐的配置。
- theme：主题，theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）。还可以传入其它字符，如：theme: 'xxx'，那么控件将会多出一个 class="laydate-theme-xxx" 的CSS类，以便于你单独定制主题。
- calendar：是否显示公历节日，通过设置 true 来开启。国际版不会显示。
- mark：自定义标注重要日子，例：{'0-0-15': '中旬'}（可有多个“,”分隔，0代表每年每月）
2.2、laydate回调参数
- ready：控件在打开时触发，回调返回一个参数：初始的日期时间对象
- change：年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象。
- done：控件选择完毕后的回调，点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
2.3、其他
- 弹出控件提示：执行核心方法 laydate.render(options) 会返回一个当前实例对象。其中包含一些成员属性和方法，比如：hint方法
- 配置基础参数（不常使用）：采用 requirejs 等其它方式引用 laydate，那么你需要设置基础路径，以便 laydate.css 完成加载。
laydate.path = '/static/xxx/'; //laydate.js 所在目录 //配置好路径后，再调用 laydate.render(options); -
其他方法
方法名 备注 laydate.getEndDate(month, year) 获取指定年月的最后一天，month默认为当前月，year默认为当前年。如：
var endDate1 = laydate.getEndDate(10); //得到31
var endDate2 = laydate.getEndDate(2, 2080); //得到29
3、即时通讯（layim）
LayIM正试图重新为网页带来一些社交想象。作为一款Web即时通讯前端解决方案（服务端需自写），LayIM提供了全方位的前端接口支撑，不仅能让您更高效地接入到自己的通讯服务中，更能让你轻松地与 环信、融云、野狗 等第三方通讯服务平台对接。
4、分页（laypage）
4.1、使用：
指向一个分页的容器，通过服务器得到初始，即可完成分页渲染。
<div id="test1"></div>
<script src="/static/build/layui.js"></script>
<script>
layui.use('laypage', function(){
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
,count: 50 //数据总数，从服务端得到
});
});4.2、laypage基础参数
| 参数选项 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| elem | 指向存放分页的容器，值可以是容器ID、DOM对象。如： 1. elem: 'id' 注意：这里不能加 # 号 2. elem: document.getElementById('id') |
String/Object | - |
| count | 数据总数。一般通过服务端得到 | Number | - |
| limit | 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。 | Number | 10 |
| limits | 每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框 | Array | [10, 20, 30, 40, 50] |
| curr | 起始页。一般用于刷新类型的跳页以及HASH跳页。如：
|
Number | 1 |
| groups | 连续出现的页码个数 | Number | 5 |
| prev | 自定义“上一页”的内容，支持传入普通文本和HTML | String | 上一页 |
| next | 自定义“下一页”的内容，同上 | String | 下一页 |
| first | 自定义“首页”的内容，同上 | String | 1 |
| last | 自定义“尾页”的内容，同上 | String | 总页数值 |
| layout | 自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域） | Array | ['prev', 'page', 'next'] |
| theme | 自定义主题。支持传入：颜色值，或任意普通字符。如： 1. theme: '#c00' 2. theme: 'xxx' //将会生成 class="layui-laypage-xxx" 的CSS类，以便自定义主题 |
String | - |
| hash | 开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr} 利用这个，可以在页面载入时就定位到指定页 | String/Boolean | false |
4.3、jump切换分页的回调
当分页被切换时触发，第一个参数（obj）：该页的所有选项，第二个参数（first）：是否首次，一般由于初始值加载的判断。
laypage.render({
elem: 'test1'
,count: 70 //数据总数，从服务端得到
,jump: function(obj, first){
//obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if(!first){//第一次进入页面为true，之后每一次跳转页面都为undefined
//do something
}
}
});
5、模板引擎（laytpl）
可以与数据分离（有点类似于java的el表达式，不过语法不同）
语法：
| 语法 | 说明 | 示例 |
|---|---|---|
| {{ d.field }} | 输出一个普通字段，不转义html |
|
| {{= d.field }} | 输出一个普通字段，并转义html |
|
| {{# JavaScript表达式 }} | JS 语句。一般用于逻辑处理。用分隔符加 # 号开头。 注意：如果你是想输出一个函数，正确的写法是：{{ fn() }}，而不是：{{# fn() }} |
|
| {{! template !}} | 对一段指定的模板区域进行过滤，即不解析该区域的模板。注：layui 2.1.6 新增 |
|
也可重新定义分割符。（不要急躁，去官网找一下吧。）
以下模块由于官网讲解比较详细，同时内容比较多也不好记录所以暂留。
6、数据表格（table）
layui最核心的组成之一，对表格进行一系列功能和动态化数据操作。
7、表单（form）
8、文件上传（upload）
9、常用元素操作（element）
元素功能的开启只需要加载element模块即会自动完成，所以不用跟其它模块一样为某一个功能而调用一个方法。
10、评分（rate）
11、轮播（carousel）
12、流加载（flow）
13、工具集（util）
14、代码修饰器（code）