屬性 :html 現可正常插入內容。

pardnchiu · Nov 10, 2024 · 89584f8 · 89584f8
1 parent e423d11
commit 89584f8
Show file tree

Hide file tree

Showing 13 changed files with 35 additions and 26 deletions.
diff --git a/DEPRECATION.md b/DEPRECATION.md
@@ -1,10 +1,13 @@
-## 預計 `1.*.*` 移除
+## 預計 `1.*.*` 棄用
 
-- 所有的生命週期方法需要移動至 `when` 值中。確保代碼一致性和可維護性。
-    - `lifecycle` 對象：任何使用 `lifecycle` 對象定義生命週期方法的方式將被去除。
-    - 獨立定義的生命週期方法：所有在 `QUI` 對象中直接定義的生命週期方法（例如，`before_render` 等）都將不再被支持。
-    從以下寫法：
-    ```JavaScript
+> 為確保代碼風格保有一致性與壓縮代碼容量，本專案 1.0.0 開始僅保留駝峰命名的屬性。不再支持蛇形名的屬性。
+
+- 生命週期方法統一移至 `when` 對象中：
+    - 移除 `lifecycle` 對象
+    - `when` 對象僅保留駝峰命名屬性
+    - 移除 QUI 對象中直接定義的生命週期方法
+    - 舊寫法：
+    ```javascript
     const app = new QUI({
         lifecycle: {
             before_render: _ => {
@@ -16,14 +19,16 @@
         }
     });
     ```
-    改為：
-    ```JavaScript
+    - 新寫法：
+    ```javascript
     const app = new QUI({
         when: {
-            before_render: _ => {
-                console.log("準備渲染")
+            beforeRender: _ => {
+            console.log("準備渲染")
             },
         }
     });
     ```
-- 非標準 CSS 屬性寫法將不再支持。請使用標準 CSS 屬性名稱。 (例如：將 `:borderRadius` 改為 `:border-radius`；將 `:bg-color` 改為 `:background-color`)
+- CSS 屬性統一使用標準寫法：
+    - 將 `:borderRadius` 改為 `:border-radius`
+    - 將 `:bg-color` 改為 `:background-color`
diff --git a/README.md b/README.md
@@ -1,7 +1,11 @@
 # PDQuickUI
 
-![](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444) ![](https://img.shields.io/github/size/pardnchiu/PDQuickUI/dist%2FPDQuickUI.js) ![](https://img.shields.io/github/license/pardnchiu/PDQuickUI)<br>
-[![](https://img.shields.io/github/v/release/pardnchiu/PDQuickUI)](https://github.com/pardnchiu/PDQuickUI) [![](https://img.shields.io/npm/v/pdquickui)](https://www.npmjs.com/package/pdquickui) ![](https://img.shields.io/jsdelivr/npm/hw/pdquickui)<br>
+![](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444) 
+![](https://img.shields.io/github/size/pardnchiu/PDQuickUI/dist%2FPDQuickUI.js) 
+![](https://img.shields.io/github/license/pardnchiu/PDQuickUI)<br>
+[![](https://img.shields.io/github/v/release/pardnchiu/PDQuickUI)](https://github.com/pardnchiu/PDQuickUI) 
+[![](https://img.shields.io/npm/v/pdquickui)](https://www.npmjs.com/package/pdquickui) 
+[![](https://img.shields.io/jsdelivr/npm/hw/pdquickui)](https://www.jsdelivr.com/package/npm/pdquickui)<br>
 [![](https://img.shields.io/badge/read-English%20Version-ffffff)](https://github.com/pardnchiu/PDQuickUI/blob/main/README.en.md)
 
 `PDQuickUI` 是從 [PDRenderKit](https://github.com/pardnchiu/PDRenderKit) 中獨立出來的前端渲染框架，專注於強化前端框架功能。<br>

diff --git a/dist/PDQuickUI.js b/dist/PDQuickUI.js
diff --git a/dist/PDQuickUI.module.js b/dist/PDQuickUI.module.js
diff --git a/index.html b/index.html
@@ -51,8 +51,8 @@
 
         <!-- 資源預載: https://cdn.jsdelivr.net -->
         <link rel="preconnect" href="https://cdn.jsdelivr.net">
-        <link rel="preload" href="https://cdn.jsdelivr.net/npm/pdmarkdownkit@latest/dist/PDQuickUI.js" as="script">
-        <link rel="preload" href="https://cdn.jsdelivr.net/npm/pdmarkdownkit@latest/dist/PDRenderKit.js" as="script">
+        <link rel="preload" href="https://cdn.jsdelivr.net/npm/pdquickui@latest/dist/PDQuickUI.js" as="script">
+        <link rel="preload" href="https://cdn.jsdelivr.net/npm/pdrenderkit@latest/dist/PDRenderKit.js" as="script">
         <link rel="preload" href="https://cdn.jsdelivr.net/npm/pdmarkdownkit@latest/dist/PDMarkdownKit.js" as="script">
         <!-- <script src="./dist/PDQuickUI.js" copyright="Pardn Ltd"></script> -->
         <!-- <script src="./src/PDQuickUI.js" copyright="Pardn Ltd"></script> -->
@@ -68,7 +68,7 @@
     </head>
 
     <body id="app" :effect="fade-in">
-        <strong>延遲載入過渡</strong>
+        <strong :html="延遲載入過渡"></strong>
         <hr>
         <img :lazyload="https://picsum.photos/id/1/640/480" alt="">
         <hr>
@@ -236,16 +236,16 @@ <h4 :else>{{ title }} 4
                             // },
                             // "test"`);
                             // console.log(html)
-                            // setTimeout(_ => {
+                            setTimeout(_ => {
 
-                            //     app.data.heading = 3
-                            // }, 2000)
-                            // setTimeout(_ => {
+                                app.data.heading = 3
+                            }, 1000)
+                            setTimeout(_ => {
 
-                            //     app.data.isH2 = true
-                            //     app.data.obj.home.ary[0].name = "Test"
+                                app.data.isH2 = true
+                                app.data.obj.home.ary[0].name = "Test"
 
-                            // }, 3000)
+                            }, 2000)
                             console.log("已渲染")
                         },
                         before_update: _ => {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "pdquickui",
-    "version": "0.5.2",
+    "version": "0.5.3",
     "description": "PDQuickUI contains a lightweight front-end framework designed to separate the front-end user interface and data logic.",
     "main": "dist/PDQuickUI.js",
     "module": "dist/PDQuickUI.module.js",

diff --git a/src/*.ts b/src/*.ts
diff --git a/src/PDQuickUI.js b/src/PDQuickUI.js
diff --git a/src/function/printLog.ts b/src/function/printLog.ts
diff --git a/src/listener/LazyloadListener.ts b/src/listener/LazyloadListener.ts
diff --git a/src/listener/SVGListener.ts b/src/listener/SVGListener.ts
diff --git a/src/model/Lifecycle.ts b/src/model/Lifecycle.ts
diff --git a/src/model/QUI.ts b/src/model/QUI.ts