// 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: {
beforeRender: function () {
// 停止渲染
},
rendered: function () {
// 已渲染
},
beforeUpdate: function () {
// 停止更新
},
updated: function () {
// 已更新
},
beforeDestroy: function () {
// 停止銷毀
},
destroyed: function () {
// 已銷毀
}
}
});
模板渲染
index.html
<body id="app"></body>
<script>
const test = new QUI({
id: "app",
data: {
hint: "hint 123",
title: "test 123"
},
render: () => `
"{{ hint }}",
h1 {
style: "background: red;",
children: [
"{{ title }}"
]
}`
})
</script>
result
<body id="app">
hint 123
<h1 style="background: red;">test 123</h1>
</body>
