# pardnchiu/QuickUI

> QuickUI is a zero-dependency virtual DOM frontend framework in vanilla JavaScript with no build step, by 邱敬幃 Pardn Chiu (pardnchiu).

Maintained by 邱敬幃 Pardn Chiu (pardnchiu), Pardn Co., Ltd. Source: https://github.com/pardnchiu/QuickUI

Full text in one file: [English](https://quickui.pardn.io/llms-full.txt) · [中文](https://quickui.pardn.io/zh/llms-full.txt)

## Overview

- [Overview](https://quickui.pardn.io/index.md): QuickUI is a zero-dependency virtual DOM frontend framework in vanilla JavaScript with no build step, by 邱敬幃 Pardn Chiu (pardnchiu).
- [Getting Started](https://quickui.pardn.io/getting-started.md): Install QuickUI from CDN, npm or ESM, build it from source, and bind your first data object to an HTML template.

## Concepts

- [Architecture](https://quickui.pardn.io/architecture.md): How QuickUI layers its entry class, virtual DOM, lifecycle, utilities and listeners, with one overview diagram.
- [Rendering Pipeline](https://quickui.pardn.io/rendering-pipeline.md): Each step of a QuickUI render: directive expansion, text replacement, index-based diffing and the six patch types.
- [Reactive Data](https://quickui.pardn.io/reactive-data.md): How the Proxy around app.data detects changes, which writes trigger a re-render, and when the data becomes available.

## Template Syntax

- [Text Binding](https://quickui.pardn.io/text-binding.md): Write data into text with {{ value }} placeholders and insert raw HTML with the :html directive.
- [Built-in Functions](https://quickui.pardn.io/built-in-functions.md): LENGTH, CALC, UPPER, LOWER and DATE inside {{ }}: syntax, supported operators, date tokens and limits.
- [Conditional Rendering](https://quickui.pardn.io/conditional-rendering.md): Show elements with :if, :else-if and :else, the comparison operators, special values and evaluation rules.
- [Loop Rendering](https://quickui.pardn.io/loop-rendering.md): Repeat elements over arrays and objects with :for, including index variables, loop scope and nested loops.
- [Attribute Binding](https://quickui.pardn.io/attribute-binding.md): Bind data to HTML attributes with the : and q- prefixes, how values are dispatched, and how :hide decides.
- [Style Binding](https://quickui.pardn.io/style-binding.md): Bind data to inline styles with :[CSS property] and replace the legacy :bg-* and camelCase names.

## Interaction

- [Event Binding](https://quickui.pardn.io/event-binding.md): Wire native DOM events to handlers with @event or qe-, handler lookup rules, and getting loop items.
- [Two-way Binding](https://quickui.pardn.io/two-way-binding.md): How :model writes input, textarea, select, checkbox and radio values back into data, and its limits.

## Features

- [i18n](https://quickui.pardn.io/i18n.md): Define locales as objects or JSON files, reference translations in text and attributes, and switch with app.lang().
- [Lifecycle Hooks](https://quickui.pardn.io/lifecycle.md): When beforeRender, rendered, beforeUpdate and updated fire, their arguments, and how returning false cancels a render.
- [Block Insertion](https://quickui.pardn.io/block-insertion.md): Load an external HTML file into a QuickUI template with the temp element and :path, including load order and failure cases.
- [Image Lazy Loading](https://quickui.pardn.io/lazyload.md): Load images only when they enter the viewport with :lazyload, the loading placeholder and the 404 fallback.
- [SVG Inlining](https://quickui.pardn.io/svg-inline.md): Replace a temp-svg element with the inline SVG markup of an external file so CSS can style it, and what is carried over.
- [Render Effects](https://quickui.pardn.io/effects.md): Fade-in, expand and skeleton mask effects on the root element during the first QuickUI render.

## Reference

- [Constructor Options](https://quickui.pardn.io/constructor-options.md): Every new QUI() option with its type and default, how id and render combine, and option interactions.
- [Instance API](https://quickui.pardn.io/instance-api.md): Methods and properties on a QUI instance: lang(), fragment(), data, event, body and isScheduled.
- [Render Shorthand](https://quickui.pardn.io/render-shorthand.md): The tag#id.class(attr)[children] shorthand returned by render, whitespace handling and supported directives.
- [Global Helpers](https://quickui.pardn.io/global-helpers.md): The global $ element lookup and _ element builder that QuickUI registers on window, with argument rules.
- [Deprecations](https://quickui.pardn.io/deprecations.md): QuickUI syntax planned for removal in 1.0.0: lifecycle object, snake_case hooks, legacy style names and animation.

## Symbols

Exported symbol -> page that documents it.

- `_` (src/function): [Global Helpers](https://quickui.pardn.io/global-helpers.md), [Getting Started](https://quickui.pardn.io/getting-started.md)
- `$` (src/function): [Global Helpers](https://quickui.pardn.io/global-helpers.md), [Getting Started](https://quickui.pardn.io/getting-started.md)
- `QUI` (src/model): [Constructor Options](https://quickui.pardn.io/constructor-options.md), [Getting Started](https://quickui.pardn.io/getting-started.md)

## 中文文件

- [總覽](https://quickui.pardn.io/zh/index.md): QuickUI 是邱敬幃 Pardn Chiu（pardnchiu）開發的零依賴虛擬 DOM 前端框架，原生 JavaScript、免建置。
- [快速開始](https://quickui.pardn.io/zh/getting-started.md): 以 CDN、npm 或 ESM 安裝 QuickUI，從原始碼建置，並把第一個資料物件綁定到 HTML 模板。
- [架構](https://quickui.pardn.io/zh/architecture.md): 以一張概覽圖說明 QuickUI 的入口類別、虛擬 DOM、生命週期、工具函式與監聽器如何分層。
- [渲染流程](https://quickui.pardn.io/zh/rendering-pipeline.md): QuickUI 每次渲染的步驟：指令展開、文字替換、依索引比對，以及六種 Patch 的套用順序。
- [響應式資料](https://quickui.pardn.io/zh/reactive-data.md): app.data 的 Proxy 如何偵測變更、哪些寫法會觸發重新渲染，以及資料何時可以存取。
- [文字綁定](https://quickui.pardn.io/zh/text-binding.md): 以 {{ value }} 把資料寫入文字，並以 :html 指令插入原始 HTML。
- [內建函式](https://quickui.pardn.io/zh/built-in-functions.md): {{ }} 中的 LENGTH、CALC、UPPER、LOWER、DATE：語法、可用運算子、日期代碼與限制。
- [條件渲染](https://quickui.pardn.io/zh/conditional-rendering.md): 以 :if、:else-if、:else 控制顯示，含比較運算子、特殊比較值與判斷規則。
- [迴圈渲染](https://quickui.pardn.io/zh/loop-rendering.md): 以 :for 依陣列或物件重複元素，含索引變數、迴圈作用域與巢狀迴圈的限制。
- [屬性綁定](https://quickui.pardn.io/zh/attribute-binding.md): 以 : 與 q- 前綴把資料綁到 HTML 屬性、各屬性的寫入方式，以及 :hide 的判斷規則。
- [樣式綁定](https://quickui.pardn.io/zh/style-binding.md): 以 :[CSS 屬性] 把資料綁到行內樣式，以及舊式 :bg-* 與 camelCase 名稱的替代寫法。
- [事件綁定](https://quickui.pardn.io/zh/event-binding.md): 以 @event 或 qe- 把原生 DOM 事件接到處理函式，含名稱查找規則與在迴圈中取得項目。
- [表單綁定](https://quickui.pardn.io/zh/two-way-binding.md): :model 如何把 input、textarea、select、checkbox、radio 的值寫回資料，以及它的限制。
- [i18n](https://quickui.pardn.io/zh/i18n.md): 以物件或 JSON 檔定義語系，在文字與屬性中引用翻譯，並以 app.lang() 切換語言。
- [生命週期鉤子](https://quickui.pardn.io/zh/lifecycle.md): beforeRender、rendered、beforeUpdate、updated 的觸發時機、參數，以及回傳 false 取消渲染。
- [區塊插入](https://quickui.pardn.io/zh/block-insertion.md): 以 temp 元素與 :path 把外部 HTML 檔載入 QuickUI 模板，含載入順序與失敗時的行為。
- [圖片延遲載入](https://quickui.pardn.io/zh/lazyload.md): 以 :lazyload 在圖片進入視窗時才載入，含載入佔位圖、404 替代圖與停用方式。
- [SVG 內嵌](https://quickui.pardn.io/zh/svg-inline.md): 把 temp-svg 元素換成外部 SVG 檔的內嵌標記，讓 CSS 能控制樣式，以及會保留哪些屬性。
- [渲染效果](https://quickui.pardn.io/zh/effects.md): QuickUI 初次渲染時根元素的淡入、展開與骨架遮罩效果，以及 mask 的正確寫法。
- [建構子選項](https://quickui.pardn.io/zh/constructor-options.md): new QUI() 每個選項的型別與預設值、id 與 render 的組合，以及選項之間的交互作用。
- [實例 API](https://quickui.pardn.io/zh/instance-api.md): QUI 實例上的方法與屬性：lang()、fragment()、data、event、body、isScheduled。
- [render 簡寫語法](https://quickui.pardn.io/zh/render-shorthand.md): render 回傳的 tag#id.class(attr)[children] 簡寫格式、空白處理與可用指令。
- [全域工具](https://quickui.pardn.io/zh/global-helpers.md): QuickUI 掛在 window 上的 $ 元素查找與 _ 元素建立工具，以及各參數規則。
- [淘汰計畫](https://quickui.pardn.io/zh/deprecations.md): QuickUI 預計在 1.0.0 移除的寫法：lifecycle 物件、snake_case 鉤子、舊式樣式名稱與 animation。

## Optional

- [Release Notes](https://quickui.pardn.io/released/index.md): pardnchiu/QuickUI changelog by version