Vue JS Training

Vue.js is gaining in popularity as an alternate JavaScript front-end framework to React and Angular. Vue is lightweight, easy to use and integrates into existing applications framework. One can adopt Vue in your legacy apps gradually or use it to build green field applications from scratch.  Vue leverages your existing JavaScript skills instead of hiding JavaScript behind an all-or-nothing API like other, popular, JavaScript frameworks. You will learn about the fundamental concepts of Vue.js and how to use it in applications. You will learn how to create instances, and single page apps as well as  Custom directives, Mixins, Routing and more.

Vue Course Objectives

Module 1: Introduction to Vue.js

• What is Vue.js
• Why Vue.js
• Quick tour of Vue-cli
• Hello World with Vue.js
• Anatomy of Hello world vue app

Module 2: Working with Template & view model

• What is vue.js template
• What is viewmodel / vue instance?
• Template syntax
• Interpolation
• Directive
• Filters
• Shorthands
• Javascript expressions
• Computed properties
• Watchers
• Class and style bindings
• HTML classes
• Inline styles
• Conditional Rendering
• Iterative Rendering

Module 3: Vue instance revisited

• Basic vue instance usage
• Multiple vue instances
• Vue instance Lifecycle
• Accessing data from outside vue instance
• Data and methods
• More about $el, $data and $refs

Module 4: Event handling

• Introduction
• Listening to events
• Method Event handlers
• Event modifiers
• Key modifiers

Module 5: Working with Forms and Two way binding

• Introduction to two way binding via v-model
• Handling user input with HTML form controls
• Data binding
• .lazy, .number, .trim modifiers
• Submitting a form

Module 6: Introduction to Components

• What are components?
• Why components
• Hello World component
• Anatomy of a component
• Registering Components Locally and Globally
• Root Component
• Thinking in components
• Composing applications as components

Module 7: Passing data to components

• Props, parent to child communication
• Custom events, child to parent
• Non parent child communication event emitter style using .emit, .on

Module 8: Content distribution with slots

• Compilation scope
• Single slot
• Named slot
• Scoped slot

Module 9: Dynamic components

• Switching Multiple Components with Dynamic Components
• Dynamic Component Behavior
• Keeping Dynamic Components Alive
• Lifecycle hooks

Module 10: Custom Directives

• Introduction
• Directive hook functions
• Developing custom directive
• Passing values and arguments to custom directives
• Directive hook arguments

Module 11: Mixins

• Introduction
• Creating and using mixins
• Option merging
• Global mixin

Module 12: Filters revisited

• Introduction
• Local filters
• Global filters
• Chaining filters

Module 13: Remote communication with Vue.js

• Using vue-resource to working with HTTP
• Fetch data
• Post data to server
• Request Response Interception
• Template URLs

Module 14: Routing

• Introduction
• Setting up vue-router
• Loading routes
• Routing modes
• Navigation with router links
• Styling active links
• Imperative navigation
• Route Parameters
• Setting up child or nested routes
• Named routes
• Query parameters
• Named router views
• Wildcard routes
• Route guards

Module 15: State management

• Introduction
• What is need for state management
• What is Pinia
• Centralized store
• Understanding Getters
• Using Getters
• Mapping Getters to Properties

Module 16: Understanding Mutations

• Using Mutations
• Using Actions
• Mapping Actions to Methods

Module 17: Unit testing

• Introduction
• Setup and tooling
• Testing components