more

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