diff options
| -rw-r--r-- | vue-notes.md | 22 | ||||
| -rw-r--r-- | vue-options.org | 124 |
2 files changed, 138 insertions, 8 deletions
diff --git a/vue-notes.md b/vue-notes.md index 9eadaf8..6e2fe93 100644 --- a/vue-notes.md +++ b/vue-notes.md @@ -50,12 +50,12 @@ In addition to those objects: - *Templates*: Vue has its own HTML templating language, that allows us to write markup such that Vue knows how to make it *reactive*. - It's just plain HTML, but with (1) user-defined custom elements - (via *components*), and (2) Vue-defined and user-defined custom - attributes (via *directives*). If you don't like writing raw HTML, - that's fine, you could write it via PUG or any other - compile-to-HTML language, since Vue templates are *just HTML*. - From the JavaScript, they are just plain strings. + It's just plain HTML, but with (1) Vue-defined and user-defined + custom elements (via *components*), and (2) Vue-defined and + user-defined custom attributes (via *directives*). If you don't + like writing raw HTML, that's fine, you could write it via PUG or + any other compile-to-HTML language, since Vue templates are *just + HTML*. From the JavaScript, they are just plain strings. - *Render functions*: Ultimately, *templates* compile to render functions. If your application design and toolchain @@ -247,12 +247,16 @@ this. I'm a big advocate of learning about things by reading the source. Be aware that Vue is written in a JavaScript superset language called -[Flow][] that adds typechecking, similar to TypeScript. +[Flow][] that adds typechecking, similar to TypeScript. When reading +the official docs, their notation for types seemed a little weird to +me; it seemed that Java-like notation would have more intuitively +conveyed a few constructs--until I realized that they were using Flow +notation. * Global API - `Vue.nextTick` - `Vue.filter` - - `Vue.use` + - `Vue.use` (plugins) - `Vue.mixin` - `Vue.version` return the Vue version as a String @@ -262,6 +266,8 @@ believe that templates compile to a render function (via `vue-template-compiler`), either at run-time, or at bundle-time if possible. +# options + [MVVM]: https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel [W3C Custom Elements]: https://www.w3.org/TR/custom-elements/#concepts [Flow]: https://flow.org/ 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 |