Vue.js, Vuex & Router Course

This course takes a thorough look at the progressive Vue.js framework. Vue.js is known as the most approachable JavaScript Framework while still being performant and maintainable. This course will cover all major parts with examples and exercises.

What you will learn

• Vue.js architectural concepts
• Creating and testing Vue.js apps
• Essential JavaScript 202X for Vue.js
• Creating reusable components
• Declarative rendering
• Templates with interpolations and directives
• Conditional and list rendering
• Handling properties and events
• Working with forms
• Dynamic components
• Plugins
• Debugging and Developer Tools
• Vue Routing and navigation
• Vue CLI
• Vuex state management
• Calling REST Services

Audience:

This course is intended for professional developers who are familiar with HTML and JavaScript 5 programming.

Content:

Introduction:

• What is Vue.js?
• Why Vue.js?

Module 1: Language constructs for Vue.js

• EcmaScript 202X (JavaScript): The relevant features for Vue.js
  • Class syntax
  • Spread operator
  • Arrow functions
  • Object destructuring
  • More..
• Option: TypeScript

Module 2: Data binding

• Data to View: Content, Attributes.
• View to Data: Events changing data or calling functions
• Styling: Class and Style attributes

Module 3: Rendering

• Conditional Rendering
  • if
  • if-else
  • show
• List Rendering
  • Array
  • Object
• Filters
  • With and without parameters
  • Chaining

Module 4: Forms

• Two-way data binding with v-model
• Value bindings
• Modifiers

Module 5: Vue Instance

• Data
• Methods
• Lifecycle hooks

Module 6: Components

• Registration
• Properties
  • Type
  • Default values
  • Computed Values
• Transclusion (Slots)
• Custom events
• Fetching data
• Hooks (future)

Module 7: Multiple components

• Parent to child communication
• Child to parent communication

Module 8: Router

• Static routing
• Dynamic routing
• Nested routes
• No match (like a 404)
• Passing props
• Lazy loading
• Named routes & views
• Data fetching

Module 9: Vue CLI

• Advantages
• Commands

Module 10: Developer experience

• Debugging
• Developer tools
• Unit testing

Module 11: Vuex

• Store
• Mutations
• Actions
• Modules
• Plugins

Module 12: Animations

• State Transitions
• List Transitions

Module 13: Server Side Rendering

• Universal code
• Routes
• Data pre-fetching
• Client Side Hydration

Module 14: Router Advanced

• Programmatic navigation
• Navigation guards
• Transitions

Appendix

Appendix 1: Dynamic Components

Appendix 2: Custom Directives

Appendix 3: Plugins

 

Other relevant courses