你知道什么是Layui吗?也许有人知道,也许有人不知道,可是我相信大部分人都应该知道BootStrap吧,这个layui也和它差很少,是一个前端UI框架,不过他们都是有各自的特色,还真不能说人家是同样的!javascript
我一冲动为啥想着学习layui呢?由于我看他说了这么一句话前端
准确地说,她更可能是为服务端程序员量身定作,你无需涉足各类前端工具的复杂配置,只需面对浏览器自己,让一切你所须要的元素与交互,从这里信手拈来。java
好吧,冲着这句话,我必须学习一下啊,专门为服务端程序员量身定作,不可不学啊。程序员
那么如今开始自学layui了!数据库
首先,找点视频吧,直觉告诉我,没有这方面相关的视频教程,若是直接去找视频教程比较浪费时间,因此放弃看视频教程的念头,那去网上搜博客学习,这个却是不错,不过至少应该去官网看一下吧bootstrap
你还别说,这页面我喜欢,别贫了,看看他的官方文档吧浏览器
挺详细的,毕竟是我们国内人士开发的,那就先从这个文档学习吧,先看看这个开始使用,在这个开始使用当中,提供了最简单的使用方法,无非就是下载layui,而后导入本身的项目,本身跟着操做一遍,挺简单,看到了效果,嗯,感受就这么回事,不是很难啊(只是皮毛,可能都算不上)微信
接着往下看文档吧,紧接着我看了下基础说明中的底层方法,发现这块就须要稍微动点脑子了,把这个底层方法看完以后,大体有点了解他这个模块的一些使用方法了。框架
由于layui说的是经典模块化嘛,因此模块对于layui是个重点,看到这个layui的模块使用,感受和element ui的使用有那么几分类似,跟bootstrap就有点差异了,我知道这必定是这个所谓的模块化搞的鬼,有些东西仍是不太理解,赶忙接着看文档吧。模块化
接下来的重点就是页面元素啦
通常这种前端ui框架上来就会先介绍总体布局,这个layui也不例外,首先说的是布局,这里面说的是栅格系统,这个就比较熟悉了,由于bootstrap中就有这个啊,你还别说,看他这个文档,我感受比
bootstrap中讲栅格将的好,无论说多说少,最起码你得说的我听懂吧,这点,layui对于我而言,作到了。
这里还提到了一个后台布局,我得赶忙试试,原本觉得很复杂,结果一看,就这么多代码,仔细看看代码,非常简单明了,本身就实际操做实例一下
就是这么个效果,嗯呢,感受挺不错的,接着看文档吧,剩下的就是在ui中常见的一些图标,按钮和表单什么的,看了下用法,都挺简单易用的,他这个重要的就是有些使用起来要加载相应的模块,好比你使用表单,你就要加入“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>
对这一块的理解其实蛮重要的,这些我以为吧对于layui都是基础使用了,重要的使用应该都是接下来的内置模块。
通过页面元素的的学习,这个layui的文档大概看了一半,剩下的就是重点--内置模块了。
这一看没关系,立马感受到费脑子了,第一个是弹出层,看文档描述,这是个很牛X的功能,能够独立使用,不过让我以为很是赞的是这个模块的学习他提供了在线调试
把相应代码放进去,就能够立马运行看到效果,不得不说很贴心。
这个内置模块应该说是layui的重点学习内容了,能够说是对简单页面元素的综合使用,不少都是作好的功能,这里叫作模块或者组件了,使用起来相比较单一的页面元素会更显复杂。
我以最快的速度把这些内置模块看了一遍,有的还亲手操做了一遍,最后发现很快会忘记,因此这块我感受比较好的学习方法就是针对每个内置模块都要单独的去学习,好比咱们经常使用的表单这块,就要单独拿出来学习,以为本身差很少会用了,而后开个项目,作一个小的demo,使用它作一些简单的页面,好比登陆页面啥的,再结合后面的数据表格,链接上数据库,实现数据查询等实实在在的例子。
这样的学习方式会比较高效!不过此次只是简单的入门,后续还须要不断学习。。。
接下来是个比较有意思的事情,知乎上一个关于这个框架和做者的一个相关问题,这里摘抄自做者自己的回答
很是建议你去看下原文,尤为第一个回答:
https://www.zhihu.com/question/58435239
我就感受吧,程序员这个群体,最见不得别人装逼了,尤为是技术这块,无论你服不服,必定会有人喷你。。。
成功无捷径,学习有方法!
推荐阅读:之后能够给你们多多争取极客时间的福利了!
本文分享自微信公众号 - 编码以外(ithuangqing)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。