doc

Author: ruojianll

docs/README.md

@@ -1,11 +1,9 @@
-# This site is in devloping...
-
-# vue-facing-decorators
+# vue-facing-decorator
 
 > Designed for vue 3. 
 
 > Write class components by TypeScript decorator.
 
 ![GitHub](https://img.shields.io/github/license/facing-dev/vue-facing-decorator) ![GitHub package.json version (branch)](https://img.shields.io/github/package-json/v/facing-dev/vue-facing-decorator/release) ![npm peer dependency version (scoped)](https://img.shields.io/npm/dependency-version/vue-facing-decorator/peer/vue)
 
-[GitHub](https://github.com/facing-dev/vue-facing-decorator) [Getting Started](#read-me)
+[GitHub](https://github.com/facing-dev/vue-facing-decorator) [Getting Started](#information)

docs/_coverpage.md

@@ -1,8 +1,16 @@
-- [Quick start](home/quick-start/quick-start.md)
+- [Information](README.md)
+- [Quick start](quick-start/quick-start.md)
 - Class component
     - [Component](class-component/component/component.md)
     - [Property](class-component/property/property.md)
     - [Method](class-component/method/method.md)
     - [Lifecycle hooks](class-component/lifecycle-hook/lifecycle-hook.md)
     - [Getter](class-component/getter/getter.md)
-    - [Event](class-component/event/event.md)
+    - [Event](class-component/event/event.md)
+    - [Reference](class-component/ref/ref.md)
+    - [Watcher](class-component/watcher/watcher.md)
+    - [Injection](class-component/injection/injection.md)
+- Inheritance
+    - [ECMAScript class](inheritance/es-class/es-class.md)
+    - [Component](inheritance/component/component.md)
+    - [Complex example](inheritance/complex-example/complex-example.md)

docs/_sidebar.md

@@ -80,7 +80,7 @@ It will be assigned to vue option component before `modifier`.
 
 ### modifier
 
-Finally, you can use this function to modify the generated vue option component directly.
+Finally, we can use this function to modify the generated vue option component directly.
 
 > This option belongs to `vue-facing-decorator`.
 

docs/class-component/component/component.md

@@ -1,8 +1,8 @@
 ## Usage
 
-You could define a method that trigger a vue event by `Emit` decorator.
+You could define a method which triggers a vue event by `Emit` decorator.
 
-The decorator received an optional event name paramater. Event will be triggered with this name and the returned value. If the parameter is omitted, use method's name as event name.
+The decorator received an optional event name paramater. Event will be triggered with this name and the method returned value. If the event name parameter is omitted, use method's name by default.
 
 [](./code-usage.ts ':include :type=code typescript')
 

docs/class-component/event/event.md

@@ -0,0 +1,21 @@
+
+import { Inject, Component, Vue } from 'vue-facing-decorator'
+
+/*
+Vue option component
+{
+    inject:{
+        name:{
+            default:'default name'
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Inject({
+        default: 'default name'
+    })
+    readonly name!: string
+}

docs/class-component/injection/code-option-default.ts

@@ -0,0 +1,21 @@
+
+import { Inject, Component, Vue } from 'vue-facing-decorator'
+
+/*
+Vue option component
+{
+    inject:{
+        nameAlias:{
+            from:'name'
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Inject({
+        from:'name'
+    })
+    readonly nameAlias!: string
+}

docs/class-component/injection/code-option-from.ts

@@ -0,0 +1,17 @@
+
+import { Inject, Component, Vue } from 'vue-facing-decorator'
+
+/*
+Vue option component
+{
+    inject:{
+        name:{}
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Inject
+    readonly name!: string
+}

docs/class-component/injection/code-usage.ts

@@ -0,0 +1,19 @@
+## Usage
+
+Use `Inject` decorator to define a watcher in vue's `inject`.
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## Options
+
+### from
+
+This is the `from` in vue `inject`.
+
+[](./code-option-from.ts ':include :type=code typescript')
+
+### default
+
+This is the `default` in vue `watch`.
+
+[](./code-option-default.ts ':include :type=code typescript')

docs/class-component/injection/injection.md

@@ -0,0 +1,24 @@
+
+import { Ref, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+<template>
+    <div ref="refEl"></div>
+</template>
+
+Vue option component
+{
+    computed:{
+        refEl(){
+            return this.refs['refEl']
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Ref
+    readonly refEl!: HTMLDivElement
+}