pyqt 获取 UI 中组件_一起学Vue:UI框架(elementui)
目标
使用Vue+ElementUI构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式。
效果页面
比如我们要实现这样列表、新增、编辑三个页面:
列表页面
新增页面
编辑页面
安装element
我们使用 vue-cli@3 进行安装
vue add element
列表组件(TodoListWithUI.vue)
与我们上次讲的无UI的列表组件逻辑基本都是一样的,我们这里主要用到了el-table,el-button这两个UI组件,至于UI组件的用法我们这里就不介绍了,大家直接上官网上看示例代码就好了,我们在这里直接贴代码:
新增编辑删除
新增组件(TodoAddWithUI.vue)
我们主要用到了el-dialog,el-form,直接贴代码:
取 消确 定
编辑组件(TodoEditWithUI.vue)
我TodoAddWithUI基本上一样,你也可以把这两个合并成一个组件,我们为了逻辑更加清楚就分开了,直接贴代码:
取 消确 定
小结
目前为止,我们完成了Vue+ElementUI的CRUD,是不是还是挺简单的呀。其实你如果用其他的UI框架,操作方式也差不多。
文中用到的代码我们放在:https://github.com/zcqiand/miscellaneous/tree/master/vue
在这里我推荐一些人气比较高的UI框架:
1.Vuetify
Star 数为 11K,提供了 80 多个 Vue.js 组件,这些组件是根据谷歌 Material Design 指南实现的。Vuetify 支持所有平台上的浏览器,包括 IE11 和 Safari 9+(使用 polyfill),并提供了 8 个 vue-cli 模板。
地址:https://github.com/vuetifyjs/vuetify
2.Quasar
Star 数超过 6K,是构建 Vue.js 响应式网站、PWA、混合移动应用和 Electron 应用的流行框架。Quasar 还支持诸如 HTML/CSS/JS 压缩、缓存清除、摇树优化(tree shaking)、源映射、代码分割和延迟加载、ES6 转码等功能。
地址:https://github.com/quasarframework/quasar
3. Vux
Star 数超过 13K,是一个流行的社区库,基于 WeUI 和 Vue 2.0。该库还支持 webpack+vue-loader+vux 的工作流。它的文档也是中文的。
地址:https://github.com/airyland/vux
4. iView
Star 数将近 16K,提供了数十种用 Vue.js 构建的 UI 组件和小部件,并采用了干净而优雅的设计。iView 被广泛采用,社区也在积极维护,并提供了 CLI 工具用于以可视化的方式创建项目。这个也值得一试。
地址:https://github.com/iview/iview
5.Mint UI
Star 数超过 11K,为 Vue.js 提供 UI 元素,提供了用于构建移动应用程序的 CSS 和 JS 组件。当全部导入时,压缩后的代码只有月 30KB(JS+CSS),当然它也支持单个组件的导入。
地址:https://github.com/ElemeFE/mint-ui/
6.Ant Design Vue
Star 数约 1.5K,用于开发具有数十个 Ant Design 实现组件的企业级后端产品,并支持基于 Webpack 调试的构建解决方案(支持 ES6)。请注意,它的开发已经停止了一段时间。
地址:https://github.com/okoala/vue-antd
pyqt 获取 UI 中组件_一起学Vue:UI框架(elementui)相关推荐
- pyqt 获取 UI 中组件_你想知道的React组件设计模式这里都有(上)
本文梳理了容器与展示组件.高阶组件.render props这三类React组件设计模式 往期回顾:HBaseCon Asia 2019 Track 3 概要回顾 随着 React 的发展,各种组件设 ...
- pyqt 获取 UI 中组件_初级UI需注意10个移动端的关键原则
如果你是初级UI设计师,那么请注意了.今天AAA教育胡老师给大家总结了初级UI需注意10个移动端的关键原则.学会了你就离中级UI设计师更近一步.话不多说赶快来学习吧! 1.用户 我们所做的一切都围绕我 ...
- pyqt 获取 UI 中组件_安卓ui设计智能输入法如何开发,这里有介绍
安卓是目前国内使用人数最多的一种操作系统.很多人都在使用安卓的输入法.其实小编要告诉大家,学会了ui设计,你也可以设计输入法.今天就让小编为大家介绍安卓ui设计智能输入法如何开发. 安卓ui设计智能输 ...
- scala 获取数组中元素_从Scala中的元素列表中获取随机元素
scala 获取数组中元素 We can access a random element from a list in Scala using the random variable. To use ...
- 为什么qt改不了ui的字体_为您的UI选择最佳字体
为什么qt改不了ui的字体 Communication plays a vital role in design. Whether you design websites, mobile apps, ...
- android ui界面组件,说说 Android 的常见 UI 控件
这些控件都有一些共有属性,让我们来看看吧: 共有属性 说明 android:id 唯一标识符 android:layout_width 宽度 android:layout_height 高度 andr ...
- 前端_快速入门Vue.js框架
文章目录 快速入门Vue.js框架 0.前言 1.Vue.js框架 1.1.Vue简介 1.2.第一个Vue程序 1.3.el:挂载点 2.Vue指令 2.2.v-html 2.3.v-on 2.4. ...
- python 获取json中最大值_详细解析 Python 爬取 bilibili 的视频、弹幕以及封面
本文使用 Zhihu On VSCode 创作并发布 环境 用到的 Python 库: Python 3.7 requests moviepy json re os 浏览器:Firefox/ 83.0 ...
- java获取url中参数_获取url参数(java / js)
(1)js // 获取url参数 function getQueryString(url, name) { console.log("url = " + url) console. ...
最新文章
- Android Read-only file system
- [bzoj2259][Oibh]新型计算机_Dijkstra
- uva 1476 - Error Curves
- docker启动odoo提示module没有安装_Ubuntu20.04通过docker安装微信
- oracle数据库的浮点数,Oracle Float类型
- 基于Spring框架的Shiro配置
- mysql 修改密码演练
- C#打开php链接传参然后接收返回值
- java 公众号文章爬取_50行代码爬取微信公众号所有文章
- sir模型初始值_SIR 模型笔记
- m序列详解及VHDL语言实现
- 计算机没鼠标怎么,电脑没鼠标怎么开启系统
- java thrift 教程_RPC学习----Thrift快速入门和Java简单示例
- 用SmartUpload实现文件上传,下载,删除
- 计算机中数据的计量单位
- NodeJS 搭建图形识别功能
- python 正则表达式量词
- coldfusion_在Windows上安装和配置ColdFusion MX 6.1
- 中断处理过程示意图_中断服务程序流程图
- 360 一个让人又爱又恨的公司
热门文章
- 符号库匹配不对的原因_王者荣耀:万恶的游戏匹配机制,最菜的队友才是游戏胜利的关键...
- canopy算法流程_求助,kmeans(Canopy)算法如何正确导入数据集
- 在计算机安全系统中,探究免疫思想在计算机安全系统中的应用
- python flask与django的区别_真正搞明白Python中Django和Flask框架的区别
- 脚本中的关于‘/xff‘字符记录
- Python中的驻留机制:小数据池和代码块
- Python实现奖金计算两种方法的比较
- python 中有趣的库tqdm
- rms c语言 函数,C中任何更快的RMS值计算?
- ftp服务器 无线路由器,用无线路由器构建FTP服务器 快乐大家分享