From fd58303459498b61a92f3fc138ceb2c0f7083155 Mon Sep 17 00:00:00 2001
From: dntzhang <dntzhang@tencent.com>
Date: Thu, 11 Jan 2024 10:31:14 +0800
Subject: [PATCH] docs: readme

---
 README.CN.md           | 50 +++++++++++++++++++++++-------------------
 README.md              | 50 +++++++++++++++++++++++-------------------
 packages/omi/README.md | 30 ++++++++++++++-----------
 3 files changed, 71 insertions(+), 59 deletions(-)

diff --git a/README.CN.md b/README.CN.md
index 5124e03788..43149345a3 100644
--- a/README.CN.md
+++ b/README.CN.md
@@ -329,22 +329,22 @@ export default defineConfig({
 
 ![](./assets/omi-vue.gif)
 
-my-counter.ts:
+my-counter.tsx:
 
 ```tsx
-import { define, Component, h } from 'omi'
-
-define('my-counter', class extends Component {
-
-  static propTypes = {
-    count: Number
-  }
-
-  static observedAttributes = ['count']
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    this.state[name] = newValue
-    this.update()
+import { tag, Component, h, bind } from 'omi'
+
+@tag('my-counter')
+class MyCounter extends Component {
+  static props = {
+    count: {
+      type: Number,
+      default: 0,
+      changed(newValue, oldValue) {
+        this.state.count = newValue
+        this.update()
+      }
+    }
   }
 
   state = {
@@ -355,26 +355,30 @@ define('my-counter', class extends Component {
     this.state.count = this.props.count
   }
 
-  sub = () => {
+  @bind
+  sub() {
     this.state.count--
     this.update()
     this.fire('change', this.state.count)
   }
 
-  add = () => {
+  @bind
+  add() {
     this.state.count++
     this.update()
     this.fire('change', this.state.count)
   }
 
-  render(props) {
-    return [
-      h('button', { onClick: this.sub }, '-'),
-      h('span', null, this.state.count),
-      h('button', { onClick: this.add }, '+')
-    ]
+  render() {
+    return (
+      <>
+        <button onClick={this.sub}>-</button>
+        <span>{this.state.count}</span>
+        <button onClick={this.add}>+</button>
+      </>
+    )
   }
-})
+}
 ```
 
 Using in Vue3:
diff --git a/README.md b/README.md
index 5cf15f716a..99b97f6975 100644
--- a/README.md
+++ b/README.md
@@ -348,22 +348,22 @@ The case of using Omi component in Vue is as follows:
 
 ![](./assets/omi-vue.gif)
 
-my-counter.ts:
+my-counter.tsx:
 
 ```tsx
-import { define, Component, h } from 'omi'
-
-define('my-counter', class extends Component {
-
-  static propTypes = {
-    count: Number
-  }
-
-  static observedAttributes = ['count']
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    this.state[name] = newValue
-    this.update()
+import { tag, Component, h, bind } from 'omi'
+
+@tag('my-counter')
+class MyCounter extends Component {
+  static props = {
+    count: {
+      type: Number,
+      default: 0,
+      changed(newValue, oldValue) {
+        this.state.count = newValue
+        this.update()
+      }
+    }
   }
 
   state = {
@@ -374,26 +374,30 @@ define('my-counter', class extends Component {
     this.state.count = this.props.count
   }
 
-  sub = () => {
+  @bind
+  sub() {
     this.state.count--
     this.update()
     this.fire('change', this.state.count)
   }
 
-  add = () => {
+  @bind
+  add() {
     this.state.count++
     this.update()
     this.fire('change', this.state.count)
   }
 
-  render(props) {
-    return [
-      h('button', { onClick: this.sub }, '-'),
-      h('span', null, this.state.count),
-      h('button', { onClick: this.add }, '+')
-    ]
+  render() {
+    return (
+      <>
+        <button onClick={this.sub}>-</button>
+        <span>{this.state.count}</span>
+        <button onClick={this.add}>+</button>
+      </>
+    )
   }
-})
+}
 ```
 
 Using in Vue3:
diff --git a/packages/omi/README.md b/packages/omi/README.md
index 945ea2fbb2..f8d29ac9f0 100644
--- a/packages/omi/README.md
+++ b/packages/omi/README.md
@@ -346,13 +346,13 @@ The case of using Omi component in Vue is as follows:
 
 ![](./assets/omi-vue.gif)
 
-my-counter.ts:
+my-counter.tsx:
 
 ```tsx
-import { define, Component, h } from 'omi'
-
-define('my-counter', class extends Component {
+import { tag, Component, h, bind } from 'omi'
 
+@tag('my-counter')
+class MyCounter extends Component {
   static props = {
     count: {
       type: Number,
@@ -372,26 +372,30 @@ define('my-counter', class extends Component {
     this.state.count = this.props.count
   }
 
-  sub = () => {
+  @bind
+  sub() {
     this.state.count--
     this.update()
     this.fire('change', this.state.count)
   }
 
-  add = () => {
+  @bind
+  add() {
     this.state.count++
     this.update()
     this.fire('change', this.state.count)
   }
 
-  render(props) {
-    return [
-      h('button', { onClick: this.sub }, '-'),
-      h('span', null, this.state.count),
-      h('button', { onClick: this.add }, '+')
-    ]
+  render() {
+    return (
+      <>
+        <button onClick={this.sub}>-</button>
+        <span>{this.state.count}</span>
+        <button onClick={this.add}>+</button>
+      </>
+    )
   }
-})
+}
 ```
 
 Using in Vue3: