DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

docs: update readme

This commit is contained in:
dntzhang 2019-09-30 12:19:36 +08:00
parent 2fffbb0bd0
commit 6d910d6303
2 changed files with 28 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
README.CN.md
View File

@ -244,94 +244,38 @@ export default class oButton extends WeElement<ButtonProps> {
<body>
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
<script>
const { define, WeElement, html, render } = Omi
const { define, render, html } = Omi
define('my-counter', class extends WeElement {
install() {
this.count = 1
this.sub = this.sub.bind(this)
this.add = this.add.bind(this)
}
sub() {
this.count--
this.update()
}
add() {
this.count++
this.update()
}
render() {
return html`
<div>
<button onClick=${this.sub}>-</button>
<span>${this.count}</span>
<button onClick=${this.add}>+</button>
</div>
`}
})
render(html`<my-counter />`, 'body')
</script>
</body>
</html>
```
### 使用 store
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Omi demo without transpiler</title>
</head>
<body>
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
<script>
const { define, WeElement, html, render } = Omi
define('my-counter', class extends WeElement {
use() {
return ['count']
}
install() {
this.sub = this.sub.bind(this)
this.add = this.add.bind(this)
}
sub() {
this.store.data.count--
}
add() {
this.store.data.count++
}
render() {
return html`
<div>
<button onClick=${this.sub}>-</button>
<span>${this.store.data.count}</span>
<button onClick=${this.add}>+</button>
</div>
`}
})
render(html`<my-counter />`, 'body', {
data: {
class Store {
data = {
count: 1
}
})
</script>
sub = () => {
this.data.count--
}
add = () => {
this.data.count++
}
}
define('my-counter', _ => html`
<div>
<button onClick=${_.store.sub}>-</button>
<span>${_.store.data.count}</span>
<button onClick=${_.store.add}>+</button>
</div>
`, {
use: ['count'],
//or using useSelf, useSelf will update self only, exclude children components
//useSelf: ['count'],
css: `span { color: red; }`,
installed() {
console.log('installed')
}
})
render(html`<my-counter />`, 'body', new Store)
</script>
</body>
</html>
@ -345,8 +289,6 @@ export default class oButton extends WeElement<ButtonProps> {
</body>
```
[→ store demo](https://codepen.io/dntzhang/pen/EBJyaG)
## 再花 30 秒完全上手
你也可以使用现代化的 JS 语法，快速构建 Omi 项目:

2
README.md
View File

@ -252,8 +252,6 @@ You can also use `my-counter` tag directly in HTML：
</body>
```
[→ store demo](https://codepen.io/dntzhang/pen/EBJyaG)
### Add Omi in 30 Seconds
You can also quickly build omi projects using modern JS code: