Call : (+91) 968636 4243
Mail : info@EncartaLabs.com

Vue JS

( Duration: 5 Days)

Program Overview
Pre-Requisites

A framework that is fast gaining reputation as being a lightweight alternative to Angular JS is VueJS which is a progressive JavaScript framework with a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API and provides speed in development that is much needed in today's technology-driven market. In VueJS training course, you will learn everything needed to know about Vue.js and using its reactive components in building applications.

By the end of VueJS workshop, delegates will learn to build web application using the Vue.js concepts taught including all the functionality that is expected in new-age applications.

Basic HTML, CSS and JavaScript knowledge.

COURSE AGENDA

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

Working with Templates & 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

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

Event Handling

Introduction
Listening to events
Method Event handlers
Event modifiers
Key modifiers

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

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 application as components

Passing Data to Components

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

Content distribution with slots

Compilation scope
Single slot
Named slot
Scoped slot

Dynamic Components

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

Custom Directives

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

Mixins

Introduction
Creating and using mixins
Option merging
Global mixin

Filters revisited

Introduction
Local filters
Global filters
Chaining filters

Remote communication with Vue.js

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

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

State Management

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

Understanding Mutations

Using Mutations
Using Actions
Mapping Actions to Methods

Unit Testing

Introduction
Setup and tooling
Testing components

Encarta Labs Advantage

One Stop Corporate Training Solution Providers for over 6,000 various courses on a variety of subjects
All courses are delivered by Industry Veterans
Get jumpstarted from newbie to production ready in a matter of few days

Trained more than 50,000 Corporate executives across the Globe
All our trainings are conducted in workshop mode with more focus on hands-on sessions

View our other course offerings by visiting https://www.encartalabs.com/course-catalogue-all.php

Contact us for delivering this course as a public/open-house workshop/online training for a group of 10+ candidates.

Top

Notice