solidi / learning-vue

Learning Vue

Philosophy

1. Reactivity - being able to react appropriately to incoming changes to the DOM.
2. String Interpolation - strings are replaced with values.
3. Load HTML first before scripts.
4. Execution order is important.

Mechanics

1. {{someId}} - DoubleStash.
2. :value - Syntantic sugar for v-bind:value.
3. v-model - two way data binding.
4. @click.prevent - Syntactic sugar for v-on:click.prevent.
5. v-if / v-else, v-show, and v-cloak for conditionally displaying elements on screen.
6. Hook - an interface that can be used to provide additional/overriding code to be executed under certain conditions or in response to specific events.
7. v-for="(a, index) in items" for looping through a data set.
8. :key for patching arrays in place for performance improvements.
9. :style for binding styles. Element style is base style, v-bind:style overrides.
10. :class for bindiing classes.
11. <transition> and <transition-group tag="tagnametoreplace"> used for grouping transitional elements for CSS.
12. .<name>-leave-to, <name>-enter and <name>-enter-active and <name>-leave-active for grouping CSS transitions.
13. For those CSS transition elements that are not parsed correctly, use is="transition-group" attribute in element.

Components

1. For reusability, encapsulation, portability, organization, and readility.
2. W3C standard states that custom component name must include a hypen.
3. Props are passed into components as an array.
4. Slots take in element data inbetween the component tags. Slots can contain names for default values.
5. To raise events, use this.$emit('<function name>', parameter(s)) to route the event to parent (root).
6. Module bundler - vue-cli - webpack, rollup or parcel. Hot reloading is supported.

Resources

1. Vue JS
2. JSDelivr
3. Vue Devtools
4. Awesome Vue
5. Vue Curated