Choose your language:

Hong Kong
New Zealand
United Kingdom
United States

Vue.js 2 Fundamentals

Course Code



4 Days

Participants should have a good understanding of HTML and CSS and be experienced JavaScript developers, with an advanced understanding of JavaScript objects and functions as first class citizens.
Vue.js is the progressive JavaScript framework that is rapidly gaining in popularity in the web community. It can be incrementally adopted, scaling easily from being used as a library to add small functionality to web pages to being used as a framework for a complete single-page-application. Vue.js is also easily integrated with other JavaScript libraries and frameworks.
This course is designed for developers.

In this course, participants will:

  • Work with the Vue.js framework
What is Vue.js
How to get Vue.js
Hello Vue.js World
Data and Methods

Interacting With the DOM
Vue.js Virtual DOM
Interpolation and HTML Encoding
Event Binding, Arguments, and Modifiers

Data and Event Binding
JavaScript code in the Template
2-way Data Binding
Computed properties
Binding HTML Classes
Binding Style Properties

Conditionals and Iterations
Built-In Conditional Directives
Built-In Looping Directives

The Vue.js Instance
Configuration Options
Selector Limitations
Using Components
Template limitations
Lifecycle Hooks

Using the Vue CLI
The Development Environment
The Development Workflow
Creating Projects Using Vue CLI
Webpack Template Overview
Vue Files and render
Using Vue CLI to Build For Production

Creating Components
Component Syntax
Data and Template Syntax
Registering a Component Locally
Root Component
File naming conventions (and folder conventions)
Selector naming (hyphenated vs. camel-case)
Component Styles and Scoping

Communicating Between Components
Emitting Events
Unidirectional Data Flow
Callback Functions
Vue.js Instance as Event Bus

Advanced Component Usage
Data Sharing Review
Content Sharing with Slots
Multiple, Named Slots
Default Slots and Default Content
Dynamic Components

Working with Forms
Input Form Binding
Input Modifiers
Checkboxes and Arrays
Radio Buttons
Dropdown Lists
Custom Controls
Submitting a Form

Built-in Directives
Creating Custom Directives
Directive Hook Functions
Passing Values to Custom Directives
Passing Arguments to Custom Directives
Creating Modifiers for Custom Directives

Filters and Mixins
Custom Filter
Computed Property as a Filter Alternative
How Mixins Get Merged
The Global Mixin Antipattern
Mixins and Scope

Transitions and Animations
Transition Element
CSS Classes Applied
Animating on Load
Using Animation Libraries
Transitioning Between Elements
Transition JavaScript Hooks
Animating Dynamic Components
Animating Multiple Elements

Working with HTTP APIs
Installing Axios
HTTP Verb Methods
GETting Data
Configuring Axios Globally
Using Interceptors
Custom Axios Instances

Vue Routing
Setting up routes
Displaying Components with router-view
Router Modes
Creating Router Links
Navigating from code
Using Route Parameters
Child Routes
Using Named Routes
Using Multiple RouterViews
Redirecting and Catch-all Routes
Animating Router Transitions
Route Guards
Lazy-Loading Route Components

Managing State with VuEx
Installing vuex
Central Store for State
Using Getters for State
Committing Mutations
Creating Actions
Passing Payloads
Vuex and 2-way data binding
Modularize State
Best Practices

Preparing for deployment
Creating Deployment Build
Deploying an App
Send Us a Message
Choose one