Back To Module Home

Hands-on Vue.js

0% completed

Before We Begin

About This Module

Commencing the Journey: Introductions and Conventions

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

Vue.js Exam

...

/

Final Remarks

Final Remarks

Here's a quick summary of the 'Hands-on Vue.js' module.

Congratulations, We successfully completed the module: Hands-on Vue.js. 🎉

Summary

In this module, we learned about ...