首页>>前端>>Vue->layui框架(layui框架和vue的区别)

layui框架(layui框架和vue的区别)

时间:2023-12-02 本站 点击:0

浪起科技建站后台管理系统常用的ui框架有哪些?

他们常用的有easyui,layui和vuejs,easyui,layui和vuejs有什么区别呢?

easyui是功能强大但是有很多的组件使用功能是十分强大的,而layui是2016年才出来的前端框架,现在才更新到2.x版本还有很多的功能没有完善,也还存在一些不稳定的情况,但是layui界面简约美观,而且容易上手而且有很多组件在layui的社区里都可以找到,layui的弹出层layer也是layui与别的框架区别

2.layui与bootstrap对比

layui是国人开发的一套框架,2016年出来的,现在已更新到2.X版本了。比较新,轻量级,样式简单好看。

bootstrap相对来说是比较成熟的一个框架,现在已经更新到4.X版本。是一个很成熟的框架,这个大部分人一般都用过。

适用范围对比:

1.layui其实更偏向与后端开发人员使用,在服务端页面上有非常好的效果

做后台框架。

作者“闲心”都说了,开发这个框架的出发点是为了满足服务端程序员的需求。所以你懂得。

layui是提供给后端开发人员最好的ui框架,基于DOM驱动,在实现前端交互上比较麻烦,页面的增删改查都需要查询DOM元素。所以在不需要交互的时候,用layui还是不错的。

2.bootstrap在前端响应式方面做得很好,PC端和移动端表现都不错。

做网站不错。

如果是类似官网,且需要同时满足PC端和移动端效果,bs表现很好。

但是如果是要交互的网站,比如商城之类,vue显然更好,前后端分离。

layui框架有几个核心文件

layui框架有10个核心文件。

轻量快捷的移动端UI框架。基于手Q样式规范,选取最常用的组件,做成手Q公用离线包减少请求,升级方式友好,文档完善,目前全面应用在腾讯手Q增值业务中。

YDUI Touch专为移动端打造,在技术实现、交互设计上兼容主流移动设备,保证代码轻、性能高;使用 Flex 技术,灵活自如地对齐、收缩、扩展元素,轻松搞定移动页面布局;实现强大的屏幕适配布局,等比例适配所有屏幕。

layui的元素由以下组成:

布局(栅格、后台布局)、颜色、字体图标、动画、按钮、表单、导航条、面包屑、选项卡、进度条、面板、静态表格、徽章、时间线、辅助元素等。

layui提供了丰富的内置模块,他们皆可通过模块化的方式按需加载,其中包括:layer、layDate、layPage、laytpl、table、form、upload、element、tree、layeditor、rate、carousel、flow、util、code等。

表格渲染之后select选中的数据不见了

如果select选中的数据在表格渲染之后不见了,可能是由于select的options的value值与表格数据不一致所致。你可以尝试指定options的value值与表格数据保持一致,或者通过js编程来同步数据。

LayUI-Vue 来了

前言:自从LayUi下架后,用过layui框架的小伙伴或许会感觉到遗憾吧,在这前端技术迭代很快的时代下,layui被淘汰,感觉很可惜。现在layui回来了。L ayui - vue 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 , Layui 的 另 一 种 呈 现 方 式,使用vue.js语法,上手快,引用更方便。

星辰大海:如果眼下还是一团零星之火,那运筹帷幄之后,迎面东风,就是一场烈焰燎原吧,那必定会是一番尽情的燃烧。待,秋风萧瑟时,散作满天星辰,你看那四季轮回,正是 layui 不灭的执念。

双面体验:拥有双面的不仅是人生,还有 layui。一面极简,一面丰盈。极简是视觉所见的外在,是开发所念的简易。丰盈是倾情雕琢的内在,是信手拈来的承诺。一切本应如此,简而全,双重体验。

返璞归真:身处在前端社区的繁荣之下,我们都在有意或无意地追逐。而 layui 偏偏回望当初,奔赴在返璞归真的漫漫征途,自信并勇敢着,追寻于原生态的书写指令,试图以最简单的方式诠释高效。

Layui - Vue 开源前端 UI 框架

Layui框架:layui的常用组件[表单]

layui的所有图标全部采用字体形式(单一色彩),取材于阿里巴巴的矢量图标库。

通过对一个内联元素(一般使用的是i标签),设定 class=="layui-icon" ,来定义一个图标,然后对元素加上图标对应的 font-class ,即可显示出对应的图标。

向任意HTML元素设定 class="layui-btn" ,建立一个基础按钮,通过追加格式为 layui-btn-{type} 的class来定义其他按钮风格,内置的按钮class可以进行任意组合,从而形成更多风格的按钮,所有的按钮统一使用 button 标签来实现。不要使用input下的 type="button" 。

新建button元素,然后在元素上加上 layui-btn 的类名

select内option的第一项主要是占个坑,让form模块预留“请选择”的提示空间,否则将会把第一项(存在value值)作为默认的选中项。

原生的select option元素无法装饰,因此所有UI框架都是采用的元素模拟的方式来实现,即将原生的select元素隐藏,用js生成其他并设置样式,所以需要在网页上激活UI框架的渲染功能。

optgroup标签给select分组,每个分组的提示信息由optgroup元素的label属性的值决定的。

layui的复选框组件中,title是设定元素的名称,一般用于checkbox、radio框, lay-skin: 定义checkbox元素的风格,不设置为默认风格,primary为原始风格。

当 lay-skin 的值为switch时,title的文字失效,开关前后的状态显示的文字由 lay-text 内决定,格式为:选中提示文字|未选中提示文字。

title:设定的元素名称,一般用于checkbox、radio框。

layui框架使用js生成了一个div结构用来展示title标签的文字和模拟选中时的logo效果,而原生的input元素则被隐藏掉,disabled开启禁用,设置value来实现自定义的值,否则选中时返回的就是默认的on.

layui如何获取文本框的内容

layui是一款基于jQuery的前端UI框架,可以通过以下方式获取文本框的内容:

1.使用jQuery的val()方法获取文本框的值。例如,如果你的文本框ID为“test”,那么你可以使用以下代码获取其值:

```

var value = $('#test').val();

```

2.使用layui的form模块获取文本框的值。需要先引入layui库和form模块,然后通过form.val()方法获取。例如,如果你的文本框name属性为“test”,那么你可以使用以下代码获取其值:

```javascript

layui.use('form', function(){

var form = layui.form;

// 获取文本框的值

var value = form.val("formName")["test"];

});

```

其中,formName是你表单的名称,test是你文本框的name属性。

这些方法都可以获取到文本框的内容,具体使用取决于你的项目需求和文本框的结构。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/9377.html