- Reactivity - being able to react appropriately to incoming changes to the DOM.
- String Interpolation - strings are replaced with values.
- Load HTML first before scripts.
- Execution order is important.
{{someId}}
- DoubleStash.:value
- Syntantic sugar forv-bind:value
.v-model
- two way data binding.@click.prevent
- Syntactic sugar forv-on:click.prevent
.v-if / v-else
,v-show
, andv-cloak
for conditionally displaying elements on screen.- Hook - an interface that can be used to provide additional/overriding code to be executed under certain conditions or in response to specific events.
v-for="(a, index) in items"
for looping through a data set.:key
for patching arrays in place for performance improvements.:style
for binding styles. Element style is base style,v-bind:style
overrides.:class
for bindiing classes.<transition> and <transition-group tag="tagnametoreplace">
used for grouping transitional elements for CSS..<name>-leave-to, <name>-enter and <name>-enter-active and <name>-leave-active
for grouping CSS transitions.- For those CSS transition elements that are not parsed correctly, use
is="transition-group"
attribute in element.
- For reusability, encapsulation, portability, organization, and readility.
- W3C standard states that custom component name must include a hypen.
- Props are passed into components as an array.
- Slots take in element data inbetween the component tags. Slots can contain names for default values.
- To raise events, use
this.$emit('<function name>', parameter(s))
to route the event to parent (root). - Module bundler - vue-cli - webpack, rollup or parcel. Hot reloading is supported.