亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

??
邱敬幃 Pardn Chiu
? ? ????? JS ???? QuickUI: ?? ????? ?????

QuickUI: ?? ????? ?????

Dec 26, 2024 am 08:23 AM

QuickUI: Lightweight Frontend Framework

GitHub

(?? PDQuickUI, ?? 0.6.0?? QuickUI? ?? ??)

QuickUI? PDRenderKit?? ??? ????? ??? ??????, ????? ????? ?? ??? ??? ?? ????.

?? DOM? ???? ??? ??? ?? ???? ??? ???? ??? ? ?? ??? ?? ? ?? ????? ???? ???.

? ????? ???? ??? ???? ?? PDRenderKit?? ????? ??? ???? ??? ??????? ???? ????.

?? ??? ??? ??? ?? ???? ????? PDRenderKit? GPL-3.0?? MIT? ?????.

??

  • ??? ????: UI? ??? ??? ???? ?? ??? ? ????.
  • ?? ???: ???? ??? ??? ???? ????.
  • ?? ???: ??? ?? ? ????? ???? ?????? ?? ??? ??????.
  • ??: 20kb ??? ?? ?? ??? ?? ??? ?????.

??

  • npm?? ??

    npm i @pardnchiu/quickui
    
  • CDN?? ??

    • QuickUI ?? ??

      <!-- Version 0.6.0 and above -->
      <script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.js"></script>
      
      <!-- Version 0.5.4 and below -->
      <script src="https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.js"></script>
      
    • ?? ??

      // Version 0.6.0 and above
      import { QUI } from "https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.esm.js";
      
      // Version 0.5.4 and below
      import { QUI } from "https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.module.js";
      

??

  • QUI ???

    const app = new QUI({
        id: "", // Specify rendering element
        data: {
            // Custom DATA
        },
        event: {
            // Custom EVENT
        },
        when: {
            before_render: function () {
                // Stop rendering
            },
            rendered: function () {
                // Rendered
            },
            before_update: function () {
                // Stop updating
            },
            updated: function () {
                // Updated
            },
            before_destroy: function () {
                // Stop destruction
            },
            destroyed: function () {
                // Destroyed
            }
        }
    });
    

??

?? ???: ??? ??? ???? ???? ?? ?????.

?? ??

Attribute Description
{{value}} Inserts text into HTML tags and automatically updates with data changes.
:path Used with the temp tag to load HTML fragments from external files into the current page.
:html Replaces the element's innerHTML with text.
:for Supports formats like item in items, (item, index) in items, (key, value) in object. Iterates over data collections to generate corresponding HTML elements.
:if
:else-if
:elif
:else
Displays or hides elements based on specified conditions, enabling branching logic.
:model Binds data to form elements (e.g., input), updating data automatically when input changes.
:hide Hides elements based on specific conditions.
:animation Specifies transition effects for elements, such as fade-in or expand, to enhance user experience.
:mask Controls block loading animations, supporting `true
:[attr] Sets element attributes, such as ID, class, image source, etc.
Examples: :id/:class/:src/:alt/:href...
:[css] Sets element CSS, such as margin, padding, etc. Examples: :background-color, :opacity, :margin, :top, :position...
@[event] Adds event listeners that trigger specified actions upon activation.
Examples: @click/@input/@mousedown...

??? ??

{{?}}

  • index.html

    npm i @pardnchiu/quickui
    
  • ??

    <!-- Version 0.6.0 and above -->
    <script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.js"></script>
    
    <!-- Version 0.5.4 and below -->
    <script src="https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.js"></script>
    

:html

  • index.html

    // Version 0.6.0 and above
    import { QUI } from "https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.esm.js";
    
    // Version 0.5.4 and below
    import { QUI } from "https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.module.js";
    
  • ??

    const app = new QUI({
        id: "", // Specify rendering element
        data: {
            // Custom DATA
        },
        event: {
            // Custom EVENT
        },
        when: {
            before_render: function () {
                // Stop rendering
            },
            rendered: function () {
                // Rendered
            },
            before_update: function () {
                // Stop updating
            },
            updated: function () {
                // Updated
            },
            before_destroy: function () {
                // Stop destruction
            },
            destroyed: function () {
                // Destroyed
            }
        }
    });
    

?? ??

> [!??]
> ???? ? ?????? ?? ?? ??? ??????? ??? ??? ??????.

:?

  • ???.html

    <h1>{{ title }}</h1>
    
        const app = new QUI({
            id: "app",
            data: {
                title: "test"
            }
        });
    
    
  • index.html

        <h1>test</h1>
    
    
  • ??

        const app = new QUI({
            id: "app",
            data: {
                html: "<b>innerHtml</b>"
            }
        });
    
    

?? ???

:? ??

  • index.html

            <b>innerHtml</b>
    
    
  • ??

    <h1>path heading</h1>
    <p>path content</p>
    
  • ??

        const app = new QUI({
            id: "app"
        });
    
    

??? ???

  • index.html

        <h1>path heading</h1>
        <p>path content</p>
    
    
  • ??: ?? = 1

        <ul>
            <li>{{ item }} {{ CALC(index + 1) }}</li>
        </ul>
    
        const app = new QUI({
            id: "app",
            data: {
                ary: ["test1", "test2", "test3"]
            }
        });
    
    
  • ??: ?? = null && isH2 = ?

        <li>
    

Nest loop

  • index.html

      <li> {{ key }}: {{ val.name }}
      • {{ item.name }}
        • {{ CALC(index1 + 1) }}. {{ item1.name }} - ${{ item1.price }}
    const app = new QUI({ id: "app", data: { obj: { food: { name: "Food", ary: [ { name: 'Snacks', ary1: [ { name: 'Potato Chips', price: 10 }, { name: 'Chocolate', price: 8 } ] }, { name: 'Beverages', ary1: [ { name: 'Juice', price: 5 }, { name: 'Tea', price: 3 } ] } ] }, home: { name: 'Home', ary: [ { name: 'Furniture', ary1: [ { name: 'Sofa', price: 300 }, { name: 'Table', price: 150 } ] }, { name: 'Decorations', ary1: [ { name: 'Picture Frame', price: 20 }, { name: 'Vase', price: 15 } ] } ] } } } });
  • ??: ?? = 3 && isH2 = null

    <ul>
        <li>food: Food
            <ul>
                <li>Snacks
                    <ul>
                        <li>1. Potato Chips - </li>
                        <li>2. Chocolate - </li>
                    </ul>
                    </li>
                <li>Beverages
                    <ul>
                        <li>1. Juice - </li>
                        <li>2. Tea - </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>home: Home
            <ul>
                <li>Furniture
                    <ul>
                        <li>1. Sofa - 0</li>
                        <li>2. Table - 0</li>
                    </ul>
                </li>
                <li>Decorations
                    <ul>
                        <li>1. Picture Frame - </li>
                        <li>2. Vase - </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    
    
  • ??: ?? = null && isH2 = null

        <h1>{{ title }} {{ heading }}</h1>
        <h2>{{ title }} {{ heading }}</h2>
        <h3>{{ title }} {{ heading }}</h3>
        <h4>{{ title }} {{ heading }}</h4>
    
        const app = new QUI({
            id: "app",
            data: {
                heading: [Number|null],
                isH2: [Boolean|null],
                title: "test"
            }
        });
    
    

??? ???

  • index.html

        <h1>test 1</h1>
    
    
  • ??

        <h2>test </h2>
    
    

???

    <h3>test 3</h3>

???

    <h4>test </h4>

CSS

> [!??]
> :[CSS ??]? ???? ???? ??? ??? ?? ????? ??? ??? ?????.

  • index.html

        const test = new QUI({
            id: "app",
            data: {
                hint: "hint 123",
                title: "test 123"
            },
            render: () => {
                return `
                    "{{ hint }}",
                    h1 {
                        style: "background: red;", 
                        children: [ 
                            "{{ title }}"
                        ]
                    }`
            }
        })
    
    
  • ??:

        hint 123
        <h1>test 123</h1>
    
    

??

??()

  • index.html

    
        test
    
    
        const app = new QUI({
            id: "app",
            data: {
                password: null,
            },
            event: {
                show: function(e){
                    alert("Password:", app.data.password);
                }
            }
        });
    
    
  • ??

        test
    
    
        const app = new QUI({
            id: "app",
            event: {
                test: function(e){
                    alert(e.target.innerText + " clicked");
                }
            }
        });
    
    

CALC()

  • index.html

        test
    
        const app = new QUI({
            id: "app",
            data: {
                width: "100px",
                color: "red"
            }
        });
    
    
  • ??

        test
    
    

?() / ?()

  • index.html

        <p>Total: {{ LENGTH(array) }}</p>
    
        const app = new QUI({
            id: "app",
            data: {
                array: [1, 2, 3, 4]
            }
        });
    
    
  • ??

        <p>Total: 4</p>
    
    

DATE(??, ??)

  • index.html

        <p>calc: {{ CALC(num * 10) }}</p>
    
        const app = new QUI({
            id: "app",
            data: {
                num: 1
            }
        });
    
    
  • ??

        <p>calc: 10</p>
    
    

????

:????

  • index.html

        <p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>
    
        const app = new QUI({
            id: "app",
            data: {
                test1: "upper",
                test2: "LOWER"
            }
        });
    
    
  • ??

        <p>UPPER lower</p>
    
    

SVG ??

  • test.svg

        <p>{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</p>
    
        const app = new QUI({
            id: "app",
            data: {
                now: Math.floor(Date.now() / 1000)
            }
        });
    
    
  • index.html

        <p>2024-08-17 03:40:47</p>
    
    
  • ??

        <img>
    
        const app = new QUI({
            id: "app",
            data: {
                image: "test.jpg"
            },
            option: {
                lazyload: true // Enable image lazy loading: true|false (default: true)
            }
        });
    
    

i18n

> [!??]
> ??? ??? ?? ??? ???? ?? ?????.
> ??? ???? ?? ?? ??? ????? ?? ???? ?????.

  • en.json

        <img src="test.jpg">
    
    
  • index.html

    
    
  • ?? i18nLang = zh

        const app = new QUI({
            id: "app",
            data: {
                svg: "test.svg",
            },
            option: {
                svg: true  // Enable SVG file transformation: true|false (default: true)
            }
        });
    
    
  • ?? i18nLang = en

    
    

???? ??

{
    "greeting": "Hello",
    "username": "Username"
}

??? ??

npm i @pardnchiu/quickui

???

邱敬幃 Pardn Chiu

??

? ????? ?? ????? ?? ????? ?????.

?? ??? ???? ??(EULA)? ??? ??? ???? ? ?????? ??, ?? ? ??? ? ????.


?? 2024 邱敬幃 Pardn Chiu

? ??? QuickUI: ?? ????? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!

? ????? ??
? ?? ??? ????? ???? ??? ??????, ???? ?????? ????. ? ???? ?? ???? ?? ??? ?? ????. ???? ??? ???? ???? ??? ?? admin@php.cn?? ?????.

? AI ??

Undresser.AI Undress

Undresser.AI Undress

???? ?? ??? ??? ?? AI ?? ?

AI Clothes Remover

AI Clothes Remover

???? ?? ???? ??? AI ?????.

Video Face Swap

Video Face Swap

??? ??? AI ?? ?? ??? ???? ?? ???? ??? ?? ????!

???

??? ??

???++7.3.1

???++7.3.1

???? ?? ?? ?? ???

SublimeText3 ??? ??

SublimeText3 ??? ??

??? ??, ???? ?? ????.

???? 13.0.1 ???

???? 13.0.1 ???

??? PHP ?? ?? ??

???? CS6

???? CS6

??? ? ?? ??

SublimeText3 Mac ??

SublimeText3 Mac ??

? ??? ?? ?? ?????(SublimeText3)

???

??? ??

??? ????
1597
29
PHP ????
1488
72
NYT ?? ??? ??
131
836
???
??? ??? JavaScript?? ??? ?????? ??? ??? JavaScript?? ??? ?????? Jul 04, 2025 am 12:42 AM

JavaScript? ??? ?? ????? ??? ?? ??? ??? ?? ?? ?? ????? ?? ???? ???? ?????. ??? ?? ???? ?? ??? ?? ??? ???? ???? ?? ?? ???? ???? ?????. ?? ??, ??? ? ?? ???? ??? (? : ??? null? ??) ?? ??? ????? ??????. ??? ??? ???? ??? ??? ????. closure?? ?? ??? ?? ??; ? ??? ??? ?? ?? ???? ?? ???? ????. V8 ??? ?? ???, ?? ??, ??/?? ???? ?? ??? ?? ??? ??? ????? ?? ??? ?? ??? ????. ?? ?? ???? ??? ??? ??? ??? ???? ????? ?? ?? ???? ?? ???????.

node.js?? HTTP ????? ??? node.js?? HTTP ????? ??? Jul 13, 2025 am 02:18 AM

Node.js?? HTTP ??? ???? ? ?? ???? ??? ????. 1. ?? ????? ????? ??? ??? ? ?? ????? ?? ?? ? https.get () ??? ?? ??? ??? ? ?? ????? ?? ??? ?????. 2.axios? ??? ???? ? ?? ??????. ??? ??? ??? ??? ??? ??? ???/???, ?? JSON ??, ???? ?? ?????. ??? ?? ??? ????? ?? ????. 3. ?? ??? ??? ??? ??? ???? ???? ??? ??? ???? ?????.

JavaScript ??? ?? : ?? ? ?? JavaScript ??? ?? : ?? ? ?? Jul 13, 2025 am 02:43 AM

JavaScript ??? ??? ?? ?? ? ?? ???? ????. ?? ???? ???, ??, ??, ?, ???? ?? ? ??? ?????. ?? ????? ?? ?? ? ? ??? ????? ?? ??? ??? ????. ??, ?? ? ??? ?? ?? ??? ??? ??? ???? ??? ??? ???? ??? ?? ??? ????. ?? ? ????? ??? ???? ? ??? ? ??? TypeofNull? ??? ?????? ??? ? ????. ? ? ?? ??? ???? ?????? ????? ???? ??? ???? ? ??? ? ? ????.

JavaScript Time Object, ??? Google Chrome? EACTEXE, ? ?? ? ???? ?????. JavaScript Time Object, ??? Google Chrome? EACTEXE, ? ?? ? ???? ?????. Jul 08, 2025 pm 02:27 PM

?????, JavaScript ???! ?? ? JavaScript ??? ?? ?? ?????! ?? ?? ??? ??? ??? ? ????. Deno?? Oracle? ?? ??, ??? JavaScript ?? ??? ????, Google Chrome ???? ? ??? ??? ???? ?????. ?????! Deno Oracle? "JavaScript"??? ????? Oracle? ?? ??? ??? ??????. Node.js? Deno? ??? ? Ryan Dahl? ??? ?????? ???? ????? JavaScript? ??? ???? Oracle? ????? ???? ?????.

REACT vs Angular vs Vue : ?? JS ??? ??? ?? ????? REACT vs Angular vs Vue : ?? JS ??? ??? ?? ????? Jul 05, 2025 am 02:24 AM

?? JavaScript ??? ??? ??? ?????? ?? ??? ?? ?? ??? ?? ???? ????. 1. ??? ???? ???? ?? ??? ?? ? ? ???? ??? ??? ?? ? ?? ????? ?????. 2. Angular? ?????? ??? ?? ???? ? ?? ?? ??? ??? ??? ???? ?????. 3. VUE? ???? ?? ??? ???? ?? ?? ??? ?????. ?? ?? ?? ??, ? ??, ???? ???? ? SSR? ???? ??? ??? ??? ???? ? ??? ?????. ???, ??? ??? ??? ????? ????. ??? ??? ??? ??? ?? ????.

JavaScript?? ?? ?? ??? (IIFE)? ????? JavaScript?? ?? ?? ??? (IIFE)? ????? Jul 04, 2025 am 02:42 AM

iife (?? invokedfunctionexpression)? ?? ??? ???? ?? ????? ??? ???? ?? ??? ????? ?? ??? ? ?????. ??? ?? ?? ??? ???? ? ?? ??? ??? ?? (function () {/code/}) ();. ?? ???? ??? ?????. 1. ?? ??? ??? ?? ???? ?? ??? ??? ?????. 2. ?? ??? ??? ???? ?? ?? ??? ????. 3. ?? ?? ??? ????? ?? ???? ???????? ?? ? ??. ???? ?? ???? ?? ??? ES6 ??? ??? ??? ?? ? ??? ????? ??? ? ???? ???????.

?? ??? : JavaScript? ??, ?? ?? ? ?? ????? ?? ??? : JavaScript? ??, ?? ?? ? ?? ????? Jul 08, 2025 am 02:40 AM

??? JavaScript?? ??? ??? ?????? ?? ???????. ?? ??, ?? ?? ? ??? ??? ?? ????? ????? ?????. 1. ?? ??? ??? ????? ???? ??. ()? ?? ??? ??? ?????. ?. ()? ?? ??? ?? ??? ??? ?? ? ? ????. 2. ?? ??? .catch ()? ???? ?? ??? ??? ?? ??? ??????, ??? ???? ???? ????? ??? ? ????. 3. Promise.all ()? ?? ????? (?? ?? ?? ? ??????? ??), Promise.Race () (? ?? ??? ?? ?) ? Promise.AllSettled () (?? ??? ???? ??)

?? API? ???? ??? ???? ??? ?????? ?? API? ???? ??? ???? ??? ?????? Jul 08, 2025 am 02:43 AM

Cacheapi? ?????? ?? ???? ??? ???? ???, ?? ??? ??? ?? ???? ? ??? ?? ? ???? ??? ??????. 1. ???? ????, ??? ??, ?? ?? ?? ???? ???? ??? ? ????. 2. ??? ?? ?? ??? ?? ? ? ????. 3. ?? ?? ?? ?? ?? ??? ??? ?? ?????. 4. ??? ???? ?? ?? ???? ?? ?? ?? ?? ?? ???? ?? ?? ??? ??? ? ????. 5. ?? ???? ??, ??? ??? ? ??? ??, ?? ??? ? ?? ???? ???? ???? ? ?? ?????. 6.?? ??? ?? ?? ?? ??, ???? ?? ? HTTP ?? ????? ?????? ???????.

See all articles