nine-9 1.2.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -23
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
一个轻量、高性能、类型安全的 Vanilla DOM 响应式 UI 框架。
|
|
4
4
|
|
|
5
|
-
融合了 Vue 模板指令和 React Hooks
|
|
5
|
+
融合了 Vue 模板指令和 React Hooks 的优点，取两者之长。同时运行及其轻量，甚至打包后可以用于 XXXMonkey UserScript。
|
|
6
6
|
|
|
7
7
|
## 特性
|
|
8
8
|
|
|
@@ -23,36 +23,39 @@ npm install nine-9
|
|
|
23
23
|
## 快速开始
|
|
24
24
|
|
|
25
25
|
```typescript
|
|
26
|
-
import { createComponent,
|
|
26
|
+
import { $, createArray, createComponent, styleSet, sync, tree, when, wrap } from "./nine";
|
|
27
27
|
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
28
|
+
const Counter = createComponent({ //创建组件
|
|
29
|
+
props: {
|
|
30
|
+
initial: { //参数名
|
|
31
|
+
validate: Number.isInteger, //验证器
|
|
32
|
+
transform: Number, //转换器
|
|
33
|
+
required: false, //是否必填
|
|
34
|
+
shadow: 0, //默认值
|
|
35
|
+
}
|
|
34
36
|
}
|
|
35
37
|
}, (props) => {
|
|
36
|
-
const count = wrap(props.initial);
|
|
37
|
-
const doubled = sync(() => count.get() * 2);
|
|
38
|
-
|
|
38
|
+
const count = wrap(props.initial); //ref
|
|
39
|
+
const doubled = sync(() => count.get() * 2, [count]); //computed
|
|
39
40
|
return tree("div")
|
|
40
|
-
.use(
|
|
41
|
-
styleSet()
|
|
42
|
-
.fontSize("20px")
|
|
43
|
-
.padding("10px")
|
|
44
|
-
)
|
|
41
|
+
.use(styleSet().fontSize("20px").padding("10px"))
|
|
45
42
|
.append(
|
|
43
|
+
"敲木鱼", tree("br"),
|
|
46
44
|
tree("button")
|
|
47
45
|
.on("click", () => count.set(count.get() + 1))
|
|
48
|
-
.textContent("
|
|
49
|
-
tree("
|
|
50
|
-
|
|
51
|
-
|
|
46
|
+
.textContent("点击加一"),
|
|
47
|
+
tree("button")
|
|
48
|
+
.on("click", () => count.set(count.get() - 1))
|
|
49
|
+
.textContent("点击减一"),
|
|
50
|
+
tree("br"),
|
|
51
|
+
"当前值：", $(count), //引用响应式的值，类似模板语法{{ count }}
|
|
52
|
+
"双倍值：", $(doubled),
|
|
53
|
+
sync(() => createArray(doubled.get(), () => tree("div").textContent("你点了一下")), [doubled]), //列表渲染v-for
|
|
54
|
+
when(() => count.get() > 10, () => tree("p").textContent("count > 10 时显示"), [count]), //条件渲染v-if
|
|
52
55
|
);
|
|
53
56
|
});
|
|
54
57
|
|
|
55
|
-
|
|
58
|
+
Counter({ initial: 0 }).mount("body");
|
|
56
59
|
```
|
|
57
60
|
|
|
58
61
|
## 与 Vue 对比
|
|
@@ -63,5 +66,3 @@ counter({ initial: 0 }).mount("#app");
|
|
|
63
66
|
| `sync()` | `computed()` | 响应式计算值 |
|
|
64
67
|
| `when(condition, tree)` | `v-if` | 条件渲染 |
|
|
65
68
|
| `sync(() => items.map(...))` | `v-for` | 列表渲染 |
|
|
66
|
-
|
|
67
|
-
## API
|