Releases: pardnchiu/QuickUI
Releases · pardnchiu/QuickUI
v0.6.2
v0.6.1
重大變更
- 專案名稱更改：專案名稱精簡為 QuickUI，更加簡潔易記。
修正
- 修正了
:if在沒有:else且值未匹配時的行為，現在會正常移除對應元素。
新增
:lazyload
預設的效果改為新增的為漸層背景動畫，可透過:effect=circle 切換為讀取圓圈動畫。- 新增
i18n多語言支持：
支持通過對象格式直接設置多語言內容，或動態加載語言檔案，並支援動態切換語言。<body id="app"> <h1>{{ i18n.greeting }}, {{ i18n.username }}: {{ username }}</h1> <button @click="change" data-lang="zh">切換至中文</button> <button @click="change" data-lang="zn">Switch to English</button> </body> <script> const app = new QUI({ id: "app", data: { username: "Pardn" }, i18n: { zh: { greeting: "你好", username: "用戶名" }, en: { greeting: "Hello", username: "Username" } }, i18nLang: "zh | en", // 選擇語言 event: { change: e => { const _this = e.target; const lang = _this.dataset.lang; app.lang(lang); }, } }); </script>
調整
- 事件綁定簡化：
:for中的:@click現可簡化為@click，進一步提升代碼清晰度與可讀性。
即將移除的功能
- 詳細資訊請參閱這裡
v0.5.4
v0.5.3
v0.5.2
v0.5.1
v0.5.0
v0.4.0
新增
- 新增
render參數，使用模板語法可以動態插入 HTML 內容，類似於使用:html動態插入innerHTML。- index.html
<body id="app"></body> <script> const test = new QUI({ id: "app", data: { hint: "hint 123", title: "test 123" }, render: () => { return ` "{{ hint }}", h1 { style: "background: red;", children: [ "{{ title }}" ] }` } }) </script>
- Result
<body id="app"> hint 123 <h1 style="background: red;">test 123</h1> </body>
- index.html
即將移除的功能
- 詳細資訊請參閱這裡
v0.3.0
更新
- 引入了新的狀態監控方法
before_destory和destroyed，用來監控應用在銷毀前及銷毀後的狀態變化。
調整
- 將生命週期的管理功能獨立出來，集中於
Lifecycle的模組。 - 將所有的狀態監控功能整合到了
lifecycle中，方便管理。新的狀態監控如以下例子：const app = new QUI({ id: "app", lifecycle: { before_render: _ => { console.log("準備渲染") }, rendered: _ => { console.log("已渲染") }, before_update: _ => { console.log("準備更新") }, updated: _ => { console.log("已更新") }, before_destory: _ => { console.log("準備銷毀") }, destroyed: _ => { console.log("已銷毀") } } });
修正
- 修復了
REPLACE動作，操作子節點渲染的錯誤。 - 修正了在迴圈中屬性無法正確取用全局資料的問題。
即將移除的功能
- 詳細資訊請參閱這裡