The course starts with the basics, exposing you to words, ideas, architecture, and tooling before leading you with the installation. There are several crucial front-end frameworks used by developers in this moedern time, including dynamic components such as unit testing. Vue.js is one of the most popular language frameworks for application and interface development in the globe.
Vue.js is a front-end JavaScript framework that has a low learning curve. Vue's low entry barrier, simplicity of usage, and excellent documentation make it a fun and approachable technology. In this course, you will study key ideas that will help you in getting started with Vue. You'll also become independent to develop any app with vue JS training. Moreover, Desire Infotech covers all small detail with practicals and live project.
Trainer will communicate with you in a soft manner and will teach you every ins and out of the course. Trainers are eager to teach you, they will change their method if it is required.
1. Trainers have Expereinced on multiple real-time projects in their Industries.
2. Expert level subject knowledge and fully up-to-date on real word indusry applications.
3. Strong theoretical and practical knowledge.
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 vuejs
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