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