diff options
Diffstat (limited to 'vue-options.org')
| -rw-r--r-- | vue-options.org | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/vue-options.org b/vue-options.org new file mode 100644 index 0000000..2899c01 --- /dev/null +++ b/vue-options.org @@ -0,0 +1,124 @@ + - Calling ~new Vue(...)~ creates a new Vue instance. + - Creating a component with ~Vue.extend(...)~ creates a new subclass of + Vue, not an instance. + - An instance of that component is then created by a parent Vue + instance. + +Several of these have Functions as values. ES6 introduced arrow +functions (~(args) => result~). This handy new syntax seems tempting +to use here, but be warned! The ~this~ variable works differently in +arrow functions than normal functions; in arrow functions it will be +~this~ in the scope where you defined the function; if you use +traditional function syntax, then ~this~ will be the Vue instance of +where the function is called. The latter is probably what you want, +as these functions are mostly effectively private methods of your +components; so ~this~ should be the instance of your component. + + * C = Class + * 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 | | | | | +|---+---+---+-----------------+--------------------------------------------------------+---------+----------+-----------------------------------------------| +| | | | | | | | | + +* Data +** data + +When instantiating the Vue instance, the ~data~ object will have its +properties recursively converted in to getters/setters to accomplish +reactivity. *The Object must be plain*; browser API objects and +prototype properties are ignored. The data should be just data---no +objects with https://vuejs.org/v2/guide/computed.htmltheir own stateful behavior. + +additionally ~vm.a~ proxies to ~vm.$data.a~. Properties starting with +~_~ or ~$~ are ignored. + +When creating an instance, ~data~ is a specific Object; but when +creating a class, ~data~ is a Function that returns an Object that +will be used as the default ~data~ for instances of that class. + +** props + +A list of attributes that are exposed to accept data from the parent +component. + +It seems kinda weird that ~props~ is an attribute of the child, not +the parent. + +In the Object form, the keys are the list of props, and the values are +the type of that prop. + +#+begin_src +props: { + // type check + height: Number, + // type check plus other validations + age: { + type: Number, + default: 0, + required: true, + validator: function (value) { + return value >= 0 + } + } +} +#+end_src + +** propsData + +Initial values for ~props~; for when there's no real parent, during +unit testing + +** computed + +https://vuejs.org/v2/guide/computed.html + +** watch + +TODO + +* DOM +** el +* Lifecycle hooks +* Assets |