Hands-on Vue.js: Build a fully functional SPA

Takeaway Skills

Understand the basics of Vue.js and the theory behind using Front-end JavaScript Frameworks.

Cover the most practical use-cases of the Vue.js framework.

Learn basic knowledge for more advanced courses on Vue.js.

Develop a working Vue.js Single Page Application step-by-step.

Understand the basics of Vue.js and the theory behind using Front-end JavaScript Frameworks.

Cover the most practical use-cases of the Vue.js framework.

Learn basic knowledge for more advanced courses on Vue.js.

Develop a working Vue.js Single Page Application step-by-step.

Course Overview

This course will provide you with the necessary skills to develop intermediate-level Single Page Applications (SPA) by using Vue.js. You will start with an introduction to Vue.js, why it is useful, and an explanation of its basic structure. After that, you will cover some crucial mat... See More

How You'll Learn

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Course Contents

Show All

Show All Lessons

1. Commencing the Journey: Introductions and Conventions

What Does This Course Cover?

Who Is This Course For?

Conventions of the Course

2. Why Use JavaScript Front-end Frameworks?

How Do Traditional Web Pages Work?

What is Vue.js?

How is Vue.js Better? (Virtual DOM)

Quiz on Front-end Frameworks

3. Basic Structure of Vue.js App

Structure Rundown of Vue.js App

el: ‘#app’ and .$mount('#app')

Data in Vue.js App

Methods in Vue.js

Vue Instance Lifecycle

Lifecycle Hooks

Coding Challenge: Vue.js App Structure

4. Vue Directives, Bindings, And Reactivity

Directives

Text, Raw HTML, And the Template Syntax

Using JavaScript Expressions

Computed Properties

Conditional Rendering

List Rendering

Reactive List Rendering and State

Class and Style Bindings

Quiz on Vue Directives, Bindings, and Reactivity

Coding Challenge: Bindings and Reactivity

5. Handling User Input and Event Handlers

Two-way Binding Using v-model

Value Bindings Using v-bind

Mouse and Keyboard Events

Event Modifiers

Input Modifiers

Quiz on User Input And Event Handlers

Coding Challenge: Event Handling

6. Vue Components

Components Basics

Single File Components

Passing Data to Child Components Using Props

Dynamic Props Value Binding And Reusing Components

Mixins

Listening to Child Component Events

Syncing Child Components With Parents

Slots

Dynamic Components

Quiz on Components

Coding Challenge: Components

7. Interaction With Backend Server (Database and API)

Getting Data From External API

Backend Server and Database Integration

Getting Data From Backend Server

8. The Final App

Fully Working Vue.js SPA

Conclusion

Course Assessment

Assessment on Vue.js