summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--vue-notes.md22
-rw-r--r--vue-options.org124
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