In this 2-day course, students will start with an optional review of advanced JavaScript, followed by the fundamental concepts and structures of Vue.js development. Students will use Vue.js to build a real-world frontend application through a series of hands-on labs.
Audience
This course is designed for experienced front-end web developers who wish to begin using Vue.js.
Objectives
After taking this course, students will be able to:
- Install, configure, and use modern web tooling
- Learn to create test suites for Vue with Vitest
- Understand what Vue.js is and what problem it solves
- Explore the basic architecture of a Vue.js application
- Gain a deep knowledge of Vue.js components and the Composition API
- Build a Single Page Application with Vue Router
- Use Pinia for maintaining state in a Vue.js application
- Learn Vue.js best practices
Topics
- Modern JavaScript tooling
- Debugging JavaScript
- Object-oriented JavaScript
- All the basic Vue capabilities and features
- Communication between components
- Data binding
- Communication with the server via Ajax
- State management with Pinia
- Creating SPAs with Vue
- Asynchronous JavaScript: promises, async/await (time permitting)
- Animation and transitions in Vue (time permitting)
Prerequisites
Before taking this course, students should have solid experience with HTML5, CSS3, and JavaScript.
Outline
1. JavaScript Review (Optional)
- JavaScript Syntax
- JavaScript Data Types
- Variable Scoping
- JavaScript Operators
- Template Literals
- Functions
- Arrow Functions
- JavaScript Objects
- Prototypal Inheritance
- Default Parameter Handling
- Rest and Spread
- Tagged Template Literals
- Enhanced Object Properties
- Method Notation
- Array Matching
- Object Matching
- Symbol Primitive
- User-defined Iterators
- For-Of Operator
- Creating and Consuming Generator Functions
- Class Syntax
- Understanding
this - Array Methods
- Promises
- Async / Await
2. Vue.js
- Virtual DOM
- Lab 01: Get Started with Vite
- Lab 02: Your First Component
- Lab 03: Create More Components
- Lab 04: Testing Vue
- Lab 05: Manual In-Browser Testing and Debugging
- Creating and Mounting an App
- The Composition API and
<script setup> - Vue Template Syntax
- Vue.js Directives
- Reactivity Fundamentals
- Loops and Lists
- Lab 06: Static Version
- Binding HTML Classes
- Adding Styles Conditionally
- Binding Styles
- Outputting Raw HTML
- Lab 07: Styling Vue Components
- Computed Properties
- Lab 08: Computed Properties
- Reactive State with
refandreactive - Lab 09: Methods and State
- Event Handling
- Lab 10: Events
- Watchers
- Component Lifecycle
- Using Lifecycle Hooks
- Composables (replacing Mixins)
- Lab 11: Component Lifecycle
- Vue and Forms
- Lab 12: Forms
- Vue Components
- Content Distribution with Slots
- Lab 13: Slots
- Using Pinia
- Lab 14: Implementing Pinia
- Creating an SPA with Vue Router
- Lab 15: Routing
- Lab 16: AJAX with Pinia
- Transitions and Animations
- Optional Lab: Transitions and Animation