Building Web Apps with Vue.js

Introduction to Vue

In this module you'll see what Vue is all about and how it can be used in modern web development.

• The Evolution of Web Development
• Components Everywhere
• Vue Tools and Ecosystem

Vue Fundamentals

We'll get started by looking at how a Vue application is structured, and what it does. Then we'll learn about the basics of components.

• Vue App Structure
• The Vue Instance
• Component Basics
• Lifecycle Hooks
• LAB: Vue Fundamentals

Data Binding

Data binding allows you to forget about the HTML while writing JavaScript code. It allows you to inject data into a view without creating a strong dependency between the two. This results in more flexible, testable and maintainable code.

• The Importance of Binding
• Directives
• Event Handling
• Conditionals and Loops
• Computed Properties and Watchers
• Filters
• Class and Style Bindings
• LAB: Data Binding in Vue

ViewModel in Vue

Vue uses the MVVM pattern, this involves using ViewModels as a binding layer between your models and views. In this module we'll learn the ins and outs of how to use ViewModels.

• Adding Interactivity
• Methods
• Computed Properties
• Watchers
• LAB: ViewModel in Vue

Components

In this module we'll dive a bit deeper into Components. You'll learn how to create a hierarchy of components and how to handle communication between them.

• Using Multiple Components
• Passing Data with Props
• Emitting Events
• Content Slots
• LAB: Using Components

Writing Services

Services are a great way to encapsulate behaviour that doesn't belong in the component. They could contain business logic, server interaction logic, etc... In this chapter we'll learn how to use them, and how to provide and inject them into your application.

• What are Services?
• Provide / Inject
• LAB: Writing Services

Talking to the Server

Single Page applications are great! But where do they get their data? In this module, we'll explore how you can access a backend from Vue, and how to implement handy features like caching and lazy loading

• Fetch API
• Where and When to Fetch Data?
• Loading and Error Indicators
• LAB: Talking to the Server

Routing

Instead of hopping from one page to the next, you can design your website as a Single Page Application. This makes your website feel and perform more like an application. SPAs have many advantages but are usually difficult to implement. This module will teach about the constructs available in Vue to build a SPA.

• Vue Router Library
• Routing Directives
• Routing Configuration
• Nested Routes
• Navigation Guards
• LAB:Routing

Composition and Reusability

Vue provides a couple of mechanisms to prevent duplicate code. In this module we'll take a look at your best options.

• Mixins
• Composition API
• LAB: Composition and Reusability