diff options
Diffstat (limited to 'vue-options.org')
| -rw-r--r-- | vue-options.org | 106 |
1 files changed, 63 insertions, 43 deletions
diff --git a/vue-options.org b/vue-options.org index 2899c01..9cf3af7 100644 --- a/vue-options.org +++ b/vue-options.org @@ -18,49 +18,52 @@ components; so ~this~ should be the instance of your component. * I = Instance * F = Functional Component -| C | I | F | name | type | getter | setter | desc | -|---+---+---+-----------------+--------------------------------------------------------+---------+----------+-----------------------------------------------| -| | | | Data | | | | | -|---+---+---+-----------------+--------------------------------------------------------+---------+----------+-----------------------------------------------| -| Y | | ? | ~data~ | Function () => Object | | | | -| | Y | ? | ~data~ | Object | ~$data~ | | | -| Y | Y | ? | ~props~ | Array<String> / Object | | | | -| | Y | | ~propsData~ | Map<String,?> | | | for unit testing, not real use DEVELOPMENT | -| Y | Y | ? | ~computed~ | Map<String,(Function/{"get":Function,"set":Function})> | | | derivatives of ~data~, for normalization, yo! | -| Y | Y | ? | ~methods~ | Map<String,Function> | | | define public methods | -| Y | Y | ? | ~watch~ | Map<String,(String/Function/Object)> | | | | -|---+---+---+-----------------+--------------------------------------------------------+---------+----------+-----------------------------------------------| -| | | | DOM | | | | | -|---+---+---+-----------------+--------------------------------------------------------+---------+----------+-----------------------------------------------| -| | Y | | ~el~ | String / HTMLElement | ~$el~ | ~$mount~ | | -| Y | Y | Y | ~template~ | String | | | overridden by render function | -| Y | Y | | ~render~ | (createElement: () => VNode) => VNode | | | | -| | | Y | ~render~ | (createElement: () => VNode, context) => VNode | | | | -| Y | Y | Y | ~renderError~ | (createElement: () => VNode, error: Error) => VNode | | | WORKS ONLY IN DEVELOPMENT MODE | -|---+---+---+-----------------+--------------------------------------------------------+---------+----------+-----------------------------------------------| -| | | | Lifecycle hooks | | | | | -|---+---+---+-----------------+--------------------------------------------------------+---------+----------+-----------------------------------------------| -| Y | Y | ? | ~beforeCreate~ | Function | | | see: lifecycle | -| Y | Y | ? | ~created~ | Function | | | see: lifecycle | -| Y | Y | ? | ~beforeMount~ | Function | | | | -| Y | Y | ? | ~mounted~ | Function | | | | -| Y | Y | ? | ~beforeUpdate~ | Function | | | | -| Y | Y | ? | ~updated~ | Function | | | | -| Y | Y | ? | ~activated~ | Function | | | | -| Y | Y | ? | ~deactivated~ | Function | | | | -| Y | Y | ? | ~beforeDestroy~ | Function | | | | -| Y | Y | ? | ~destroyed~ | Function | | | | -| Y | Y | ? | ~errorCaptured~ | (err: Error, vm: Component, info: string) => ?boolean | | | | -|---+---+---+-----------------+--------------------------------------------------------+---------+----------+-----------------------------------------------| -| | | | Assets | | | | | -|---+---+---+-----------------+--------------------------------------------------------+---------+----------+-----------------------------------------------| -| Y | Y | ? | ~directives~ | Map<String,directive> | | | | -| Y | Y | ? | ~filters~ | Map<String,filter> | | | | -| Y | Y | ? | ~components~ | Map<String,component> | | | | -|---+---+---+-----------------+--------------------------------------------------------+---------+----------+-----------------------------------------------| -| | | | Composition | | | | | -|---+---+---+-----------------+--------------------------------------------------------+---------+----------+-----------------------------------------------| -| | | | | | | | | +| C | I | F | name | type | getter | setter | desc | +|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------| +| | | | Data | | | | | +|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------| +| Y | | ? | ~data~ | Function () => Object | | | | +| | Y | ? | ~data~ | Object | ~$data~ | | | +| Y | Y | ? | ~props~ | Array<String> / Object | | | | +| | Y | | ~propsData~ | Map<String,?> | | | for unit testing, not real use DEVELOPMENT | +| Y | Y | ? | ~computed~ | Map<String,(Function/{"get":Function,"set":Function})> | | | derivatives of ~data~, for normalization, yo! | +| Y | Y | ? | ~methods~ | Map<String,Function> | | | define public methods | +| Y | Y | ? | ~watch~ | Map<String,(String/Function/Object)> | | | | +|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------| +| | | | DOM | | | | | +|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------| +| | Y | | ~el~ | String / HTMLElement | ~$el~ | ~$mount~ | | +| Y | Y | Y | ~template~ | String | | | overridden by render function | +| Y | Y | | ~render~ | (createElement: () => VNode) => VNode | | | | +| | | Y | ~render~ | (createElement: () => VNode, context) => VNode | | | | +| Y | Y | Y | ~renderError~ | (createElement: () => VNode, error: Error) => VNode | | | WORKS ONLY IN DEVELOPMENT MODE | +|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------| +| | | | Lifecycle hooks | | | | | +|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------| +| Y | Y | ? | ~beforeCreate~ | Function | | | see: lifecycle | +| Y | Y | ? | ~created~ | Function | | | see: lifecycle | +| Y | Y | ? | ~beforeMount~ | Function | | | | +| Y | Y | ? | ~mounted~ | Function | | | | +| Y | Y | ? | ~beforeUpdate~ | Function | | | | +| Y | Y | ? | ~updated~ | Function | | | | +| Y | Y | ? | ~activated~ | Function | | | | +| Y | Y | ? | ~deactivated~ | Function | | | | +| Y | Y | ? | ~beforeDestroy~ | Function | | | | +| Y | Y | ? | ~destroyed~ | Function | | | | +| Y | Y | ? | ~errorCaptured~ | (err: Error, vm: Component, info: string) => ?boolean | | | | +|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------| +| | | | Assets | | | | | +|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------| +| Y | Y | ? | ~directives~ | Map<String,directive> | | | | +| Y | Y | ? | ~filters~ | Map<String,filter> | | | | +| Y | Y | ? | ~components~ | Map<String,component> | | | | +|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------| +| | | | Composition | | | | | +|---+---+---+-----------------+--------------------------------------------------------+-----------+----------+---------------------------------------------------------| +| | Y | ? | ~parent~ | Vue instance | ~$parent~ | | also, child is pushed on to parent's ~.$children~ array | +| ? | Y | ? | ~mixins~ | Array<object> | | | | +| Y | ? | ? | ~extends~ | Object (options object) / Function (constructor) | | | exists to allow a SFC to extend another component | +| | | | | | | | | * Data ** data @@ -122,3 +125,20 @@ TODO ** el * Lifecycle hooks * Assets +* Composition +** extends + +#+begin_src +var CompA = Vue.extend({ ... }); +var CompB = CompA.extend({ ... }); +#+end_src + +can be written as + +#+begin_src +var CompA = Vue.extend({ ... }); +var CompB = { + extends: CompA, + ... +}; +#+end_src |