原名：pdquickui，自 0.6.0 版本起更名为 quickuiquickui 是一个纯 javascript 开发的前端渲染框架。通过整合虚拟 dom 技术提升渲染效能，实现快速的数据响应和自动更新。
核心特色
高效虚拟 dom
透过精准的差异比对算法实现高效 dom 更新智慧属性更新系统，只更新发生变化的值智能子节点对比机制，最小化 dom 操作
响应式数据处理
深度数据监控系统，确保数据变更即时反映数据变更时自动更新 ui，无需手动操作智慧缓存系统避免不必要的重复渲染支援巢状数据结构的响应式处理
进阶模板功能
内建多语系（i18n）支援，轻松实现国际化支援动态载入模板并非同步处理强大的表达式系统，支援计算、日期和文字处理完整的指令系统实现灵活的 dom 操作
效能优化设计
图片和 svg 内容采用懒加载技术，提升载入速度极小的档案体积且无外部依赖智慧事件委派和资源清理机制，优化记忆体使用
文档
网站: nanomd.pardn.io说明文件: nanomd.pardn.io/doc.html
安装方式
从 npm 安装
npm i @pardnchiu/quickui
从 cdn 引入
引入 quickui 套件
module 版本
// 0.6.0 版本以上import { qui } from "https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[version]/dist/quickui.esm.js";// 0.5.4 版本以下import { qui } from "https://cdn.jsdelivr.net/npm/pdquickui@[version]/dist/pdquickui.module.js";
使用方法
初始化 qui
const app = new QUI({ id: "", // 指定渲染元素 data: { // 自訂 DATA }, event: { // 自訂 EVENT }, when: { before_render: function () { // 停止渲染 }, rendered: function () { // 已渲染 }, before_update: function () { // 停止更新 }, updated: function () { // 已更新 }, before_destroy: function () { // 停止銷毀 }, destroyed: function () { // 已銷毀 } }});
属性概览
文字与内容
{{ value }}動態文字內容
{{ username }}
顯示使用者名稱:html原始 html 插入
渲染格式化內容
模板载入
:path外部模板載入 載入頁首元件
列表与迭代
:for陣列/物件迭代{{ item.name }} 渲染列表項目
条件渲染
:if條件顯示
:else-if/:elif次要條件
:else預設內容
表单绑定
:model雙向資料綁定 與資料同步
样式与动画
动态属性
:[attr]動態屬性@@##@@
事件处理
@[event]事件監聽器
授权条款
本专案采用类 mit 授权，但仅提供混淆后的程式码：
与 mit 相同：可自由使用、修改、再散布，包含商业用途主要差异：预设仅提供混淆版程式码，原始码需另外购买授权内容：必须保留原始版权声明 (与 mit 相同)
详细条款与条件请参阅软体使用协议。
开发者
邱敬帏
email: dev@pardn.iolinkedin: linkedin.com/in/pardnchiu
©️ 2023 邱敬帏 pardn chiu
以上就是QuickUI: 轻量化前端框架的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1499903.html
微信扫一扫 
支付宝扫一扫 
