AI Features

0% completed

All LessonsFree Lessons (4)

Commencing the Journey: Introductions and Conventions

What Does This Course Cover?Who Is This Course For?Conventions of the Course

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

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

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

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

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

Interaction With Backend Server (Database and API)

Getting Data From External API Backend Server and Database Integration Getting Data From Backend Server

The Final App

Fully Working Vue.js SPA Conclusion

Course Assessment

Assessment on Vue.js

Project

Authentication With Vue.js Using Auth0

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

Quiz on User Input And Event Handlers

Test your user input and event handling skills by solving the following quiz.

We'll cover the following...

This ...