vmodel,test,docs

Author: ruojianll

docs/_sidebar.md

@@ -5,11 +5,13 @@
     - [Property](class-component/property/property.md)
     - [Method](class-component/method/method.md)
     - [Lifecycle hooks](class-component/lifecycle-hook/lifecycle-hook.md)
+    - [Component property](class-component/component-property/component-property.md)
     - [Getter](class-component/getter/getter.md)
     - [Event](class-component/event/event.md)
     - [Reference](class-component/reference/reference.md)
     - [Watcher](class-component/watcher/watcher.md)
     - [Injection](class-component/injection/injection.md)
+    - [VModel](class-component/v-model/v-model.md)
 - Inheritance
     - [ECMAScript class](inheritance/es-class/es-class.md)
     - [Component](inheritance/component/component.md)

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

@@ -0,0 +1,22 @@
+
+import { Prop, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+Vue option component
+{
+    props:{
+        p:{
+            default: 'foo'
+        }
+    }
+}
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @Prop({
+        default: 'foo'
+    })
+    p!: string
+}

docs/class-component/component-property/code-option-required.ts

@@ -0,0 +1,22 @@
+
+import { Prop, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+Vue option component
+{
+    props:{
+        p:{
+            required:true
+        }
+    }
+}
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @Prop({
+        required: true
+    })
+    p!: string
+}

docs/class-component/component-property/code-option-type.ts

@@ -0,0 +1,22 @@
+
+import { Prop, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+Vue option component
+{
+    props:{
+        p:{
+            type: String
+        }
+    }
+}
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @Prop({
+        type: String
+    })
+    p!: string
+}

docs/class-component/component-property/code-option-validator.ts

@@ -0,0 +1,26 @@
+
+import { Prop, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+Vue option component
+{
+    props:{
+        p:{
+             validator(val:any){
+                return true
+            }
+        }
+    }
+}
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @Prop({
+        validator(val:any){
+            return true
+        }
+    })
+    p!: string
+}

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

@@ -0,0 +1,20 @@
+
+import { Prop, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+Vue option component
+{
+    props:{
+        p:{
+            
+        }
+    }
+}
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @Prop
+    p!: string
+}

docs/class-component/component-property/component-property.md

@@ -0,0 +1,31 @@
+## Usage
+
+Use `Prop` decorator to define a watcher in vue's `props`.
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## Options
+
+### default
+
+This is the `default` in vue `props`.
+
+[](./code-option-default.ts ':include :type=code typescript')
+
+### required
+
+This is the `required` in vue `props`.
+
+[](./code-option-required.ts ':include :type=code typescript')
+
+### type
+
+This is the `type` in vue `props`.
+
+[](./code-option-type.ts ':include :type=code typescript')
+
+### validator
+
+This is the `validator` in vue `props`.
+
+[](./code-option-validator.ts ':include :type=code typescript')

docs/class-component/v-model/code-option-name.ts

@@ -0,0 +1,34 @@
+import { VModel, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+Vue option component
+{
+    props:{
+        value:{}
+    },
+    computed:{
+        valueAgent:{
+            get(){
+                return this['value']
+            },
+            set(value){
+                this.$emit('update:value',value)
+            }
+        }
+    }
+}
+*/
+
+/*
+In other components:
+<MyComponent v-model:value="foo"></MyComponent>
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @VModel({
+        name: 'value'
+    })
+    valueAgent!: string
+}

docs/class-component/v-model/code-option-others.ts

@@ -0,0 +1,44 @@
+import { VModel, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+Vue option component
+{
+    props:{
+        modelValue:{
+            type:String,
+            default:'bar',
+            //...
+        }
+    },
+    computed:{
+        valueAgent:{
+            get(){
+                return this['modelValue']
+            },
+            set(value){
+                this.$emit('update:modelValue',value)
+            }
+        }
+    }
+}
+
+*/
+
+/*
+
+In other components:
+
+<MyComponent v-model="foo"></MyComponent>
+
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @VModel({
+        type: String,
+        default: 'bar',
+        //...
+    })
+    valueAgent!: string
+}

docs/class-component/v-model/code-usage.ts

@@ -0,0 +1,36 @@
+import { VModel, Component, Vue } from 'vue-facing-decorator'
+
+/*
+
+Vue option component
+{
+    props:{
+        modelValue:{}
+    },
+    computed:{
+        valueAgent:{
+            get(){
+                return this['modelValue']
+            },
+            set(value){
+                this.$emit('update:modelValue',value)
+            }
+        }
+    }
+}
+
+*/
+
+/*
+
+In other components:
+
+<MyComponent v-model="foo"></MyComponent>
+
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    @VModel
+    valueAgent!: string
+}