Vue Js Course

Curriculum

1 Introduction to Vue.js
Learning Objective:
By the end of this module you will learn what kind of problems vue.js will solve and how to setup and run a vue app.

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

Hands-on:

• Create new vue app using vue cli, execute and debug.

2 Working with Template & viewmodel
Learning Objective:
By the end of this module you will learn about the templating syntax and its abilities.

• 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

Hands-on:

• Create a vue app which explores the template syntax features like interpolation, directives, expressions, watchers,  filters, computed properties, iterative & conditional rendering.

3 Vue Instance Revisited
Learning Objective:
By the end of this module you will gain deeper understanding about vue instance, lifecycle and data access from vue instance.

• 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

Hands-on:

• Create a vue application that creates multiple vue instances, explore through the lifecycle methods and code data access from outside vue instance

4 Event handling
Learning Objective:
By the end of this module you will learn how to work with events in vue.

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

Hands-on:

• Create a vue app that responds to events.

5 Working with forms & two way binding
Learning Objective:
By the end of this module you will learn how to develop forms and the power of 2 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

Hands-on:

• Create forms and apply two way binding to read and write data to forms.

6 Introduction to components
Learning Objective:
By the end of this module you learn about the significance of components and their power in reusability. You will also learn how to decompose a given web page into individual components and how to compose them to make them represent a page.

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

Hands-on:

• Convert a single html web page into a series of components, register components and compose components into application.

7 Passing data to components
Learning Objective:
By the end of this module you will learn how to enable communication between components.

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

Hands-on:

• Create multiple components and enable communication between independent component props for parent to child communication, events  for child to parent and non parent child components using event emitter.

8 Content distribution with slots
Learning Objective:
By the end of this module you will learn how to embed arbitrary content inside of child components.

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

Hands-on:

• Create a reusable component which accepts arbitrary content using slots.

9 Dynamic components
Learning Objective:
By the end of this module you will learn how to switch between various arbitrary components at the same mount point using dynamic components.

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

Hands-on:

• Create a component with tabbed layout that switches components between tabs dynamically.

10 Custom directives
Learning Objective:
By the end of this module you will learn how to develop a custom directive beside the built in directives.

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

Hands-on:

• Create a custom directive that modifies the background colour of the element when the directive is applied.

11 Mixins
Learning Objective:
By the end of this module you will learn a flexible way to distribute reusable functionalities for Vue components using mixins. 

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

Hands-on:

• Create a mixin and apply to components.

12 Filters
Learning Objective:
By the end of this module you will learn how to format data in vue template without altering the original value using filters.

• Introduction 
• Local filters 
• Global filters 
• Chaining filters

Hands-on:

• Create a component that uses default filters to format data in template, also chain multiple filters.

13 Remote communication with Vue Js
Learning Objective:
By the end of this module you will learn how to consume remote apis in vue applications.

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

Hands-on:

• Create components that fetch data from remote api and post data to remote api.

14 Routing
Learning Objective:
By the end of this module you will learn how to power vue application with routing. Also learn how to protect routes using guards.

• 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

Hands-on:

• Setup and configure vue-router, create navigation component and code declarative routing using router links, code imperative routing from component methods, configure route parameters and read them from inside component. Protect routes using guards.

15 State Management
Learning Objective:
By the end of this module you will learn how to take the advantage of state management, how to setup vue app with vuex.

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

Hands-on:

• Create a centralized store, getter & setters, actions

16 Understanding Mutations
Learning Objective:
By the end of this module you will learn how to apply mutation to change state in a Vuex store.

• Using Mutations
• Using Actions
• Mapping Actions to Methods

Hands-on:

• Create mutations to change the data in the store

17 Unit testing
Learning Objective:
By the end of this module you will learn the basics of unit testing vue app.

• Introduction
• Setup and tooling
• Testing components

Hands-on:

• Create simple unit test to test components.