Learn Vue 2: Step By Step [Laracasts]

1. Basic Data Binding
2. Setup Vue Devtools
3. Lists
4. Vue Event Listners
5. Attribute and Class Binding
6. The need for Computed Properties
7. Component 101
8. Component Within Component
9. Practical Component Exercise #1: Message
10. Practical Component Exercise #2: Modal
11. Practical Component Exercise #3: Tab
12. Component Communication Example #1: Custom Events
13. Component Communication Example #2: Event Dispatcher
14. Named Slots in a Nutshell
15. Single-Use Components and Inline Templates

Dig Deeper in Vuejs

Directive :
Attribute Name Prefixed with v- to indicate that they are special attribute provided by Vue. They are reactive that means keep the element attribute up-to-date with the property on the vue instance.

Example:
v-bind
v-if v-else
v-show v-for
v-on To Attach Event Listner that invoke methods
v-model To way binding between form input and vue app state
v-once One time interpolations that don't update on data change
v-html Double quotes interprests data as plain text. In order to interpret as html us v-html directive

Composition Of Components :

• All Vue Components are also vue instance.

Data and Methods Vue Instance :

• The properties in data are only reactive if they existed at the time of instance creation.
• Vue instance provide rich number of predefined propertied, methods which prefixed with $ to differentiate them from user defined properties.
  API References

Lifecycle Methods:

• beforeCreated

• created

• beforeMount

• mounted

• beforeUpdate

• updated

• beforeDestroy

• destroyed

  Lifecycle Diagram

Template Syntax:

• Interpolations
• Directive
  • Arguments
  • Dynamic Arguments
  • Modifiers
• Shorthands

Computed Properties and Watchers

• Computed Properties
  • Computed Caching vs Methods
  • Computed vs Watching Property
  • Computed Setter

Classes and Style Bindings

• Binding HTML Classes
  • Object Syntax
  • Array Syntax
  • With Components
• Binding Inline Styles
  • Object Syntax
  • Array Syntax
  • Auto Prefixing
  • Multiple Values

Conditional Rendering

• v-if
  • Conditional Group with v-if on <template>
  • v-else
  • v-else-if
  • Controlling Reusable Elements with key
• v-show
• v-if vs v-show
• v-if with v-for

Resources
Vue Essentail Cheat Sheet
Vue 2 Docs