Description

Description

In this immersive 5-day course, students begin with an optional refresher on advanced JavaScript concepts, then dive into the core principles of Vue.js development. Through guided, hands-on labs, they’ll build a real-world frontend application using Vue and its modern toolset.

The second phase of the course shifts to the backend, where students learn to use Node.js and Express to create a RESTful API that connects to a MongoDB database. Finally, they’ll integrate the Vue frontend with the Node.js backend to build and test a fully functional full-stack application.

This course offers a comprehensive introduction to professional full-stack development using the MEVN stack (MongoDB, Express, Vue.js, Node.js). Along the way, students will explore modern JavaScript syntax, development conventions, and best practices while gaining practical experience through real-world coding exercises and full-stack integration projects.

Training Objectives

• By the end of this course students will be able to:
• Install configure and work confidently with modern web development tools
• Write and run test suites for Vue.js applications
• Understand the purpose of Vue.js and the problems it solves in modern frontend development
• Describe the core architecture of a Vue.js application
• Build dynamic single-page applications using Vue Router
• Manage application state using Pinia
• Apply Vue.js best practices for clean maintainable code
• Develop full-featured web applications and RESTful APIs using Node.js
• Connect and interact with a MongoDB database from a Node.js backend

Course Outline

• Basic JavaScript (optional)<br />
• How JavaScript Works<br />
• JavaScript Syntax<br />
• JavaScript Data Types<br />
• JavaScript Primitives<br />
• Variables and Arrays<br />
• Creating and Using Variables<br />
• Variable Scoping with const and let<br />
• Creating and Using Arrays<br />
• JavaScript Operators<br />
• Template Literals<br />
• Functions<br />
• Arrow Functions<br />
• JavaScript Objects<br />
• Prototypal Inheritance<br />
• Advanced JavaScript (optional)<br />
• Default Parameter Handling<br />
• Rest Parameter<br />
• Spread Operator<br />
• Tagged Template Literals<br />
• Enhanced Object Properties<br />
• Property Shorthand<br />
• Method notation<br />
• Array Matching<br />
• Object Matching<br />
• Symbol Primitive<br />
• For-Of Operator<br />
• Creating and Consuming Generator Functions<br />
• Class Definition<br />
• Class Inheritance<br />
• Understanding this<br />
• Array.map()<br />
• Array.filter()<br />
• Array.reduce()<br />
• Promises<br />
• Async / Await<br />
• TypeScript Basics<br />
• Vue QuickStart<br />
• What is Vue.js?<br />
• Vue vs React and Angular<br />
• Virtual DOM<br />
• What's New in Vue 3<br />
• Two ways to write Vue Components<br />
• Options API<br />
• Composition API<br />
• Code Editors and IDEs<br />
• Volar extension<br />
• Lab 01: Vue 3 Quick Start<br />
• Lab 02: Your First Component<br />
• Lab 03: Create More Components<br />
• Lab 04: Testing Vue<br />
• Lab 05: Manual In-Browser Testing and Debugging<br />
• Getting Started With Vue.Js<br />
• Basic Vue.Js Features<br />
• Creating and Mounting a Vue App<br />
• Configuring an App<br />
• Which Style Should You Use?<br />
• Vue Templates<br />
• Using HTML in Templates<br />
• Using JavaScript in Templates<br />
• Vue.js Directives<br />
• Directive Arguments<br />
• Directive Modifiers<br />
• Vue.js Default Directives<br />
• Custom Directives<br />
• Loops and Lists<br />
• Using key<br />
• Using v-for<br />
• v-for with Arrays<br />
• v-for with Objects<br />
• Conditional Rendering<br />
• v-if vs. v-show<br />
• Lab 06: Static Version<br />
• Using Filters<br />
• Formatting Currencies with Filters<br />
• Formatting Dates with Filters<br />
• Binding HTML Classes<br />
• Adding Styles Conditionally<br />
• Binding Styles<br />
• Lab 07: Styling Vue Components<br />
• Computed Properties<br />
• Benefits of Computed Properties<br />
• Filtering / Sorting a List with a Computed Property<br />
• Using Setters in Computed Properties<br />
• Lab 08: Computed Properties<br />
• Vue State<br />
• Vue Instance's data object<br />
• ref() and reactive()<br />
• Using ref()<br />
• Using reactive()<br />
• Vue.js Data Binding<br />
• v-bind directive<br />
• Value Binding<br />
• 2-way Binding<br />
• v-model directive<br />
• Mutating Arrays<br />
• Array Mutations Vue Can't Detect<br />
• Object Mutuation Vue Can't Detect<br />
• v-bind shorthand<br />
• Vue with TypeScript<br />
• Lab 09: Methods and State + TypeScript<br />
• Event Handling<br />
• Inline Event Handling<br />
• Event Handling with Methods<br />
• Event Modifiers<br />
• v-on shorthand<br />
• Listening to Child Component Events<br />
• Emitting a Value With an Event<br />
• Lab 10: Events<br />
• Watchers<br />
• Async Operations with Watchers<br />
• Vue Instance Lifecycle<br />
• Using Lifecycle Hooks<br />
• Lab 11: Component Lifecycle<br />
• Vue and Forms<br />
• Input Bindings<br />
• 2-way Binding Pros and Cons<br />
• Creating a Form with Checkboxes<br />
• Creating a Form with Radio Buttons<br />
• Creating a Form with a Select Element<br />
• Input Modifiers<br />
• Lab 12: Forms<br />
• Vue Components<br />
• What are Vue Components?<br />
• Creating a Component<br />
• Organizing and Reusing Components<br />
• Naming Components<br />
• Global Components<br />
• Local Components<br />
• Global vs. Local<br />
• Passing Data<br />
• Using Props<br />
• Single Root Element<br />
• Using v-model on Components<br />
• v-model and components<br />
• Content Distribution with Slots<br />
• Lab 13: Slots<br />
• Loading Your Components Asynchronously<br />
• Lab 14: Composition API<br />
• Introducing Pinia<br />
• Defining a Store<br />
• Pinia Store Example with Options<br />
• Pinia Store Example with Composition<br />
• State<br />
• Getters<br />
• Actions<br />
• Lab 15: Pinia<br />
• Single-Page Applications<br />
• Creating an SPA with Vue-Router<br />
• Vue-Router Template<br />
• Vue-Router JS<br />
• Lab 16: Routing<br />
• Lab 17: AJAX with Pinia<br />
• Transitions and Animations<br />
• Custom Transition Classes<br />
• Optional Lab: Transitions and Animation<br />
• Intro to Node.js<br />
• What is Node.js?<br />
• How Does Node.js Work?<br />
• Blocking code<br />
• Non-Blocking code<br />
• V8 JavaScript Engine<br />
• Node's REPL<br />
• Running a Node.js program<br />
• Lab 18: Basic Setup<br />
• Callbacks<br />
• Modules Overview<br />
• CommonJS Example<br />
• Using Modules<br />
• Modules vs. Packages<br />
• Sources of Modules<br />
• Node's Core Modules<br />
• Buffer Objects<br />
• Modularizing Your Code<br />
• Returning Values from Modules<br />
• Using a Local Module<br />
• Optional Lab: Creating Modules<br />
• ES6 Modules<br />
• events and Streams<br />
• Non-blocking with Events<br />
• Events<br />
• Node Stream Objects<br />
• Using Readable Streams<br />
• Using Writable Streams<br />
• Other Streams<br />
• Optional Lab: Working with Streams<br />
• The pipe method<br />
• Optional Lab: Piping Between Streams<br />
• The process Object<br />
• Command Line Arguments<br />
• Optional Lab: The process object<br />
• Understanding Callbacks<br />
• Using Node's Error Convention<br />
• Node on the Web<br />
• How the Web Works<br />
• HTTP<br />
• HTTP Methods<br />
• RESTful Web Services<br />
• Using Express<br />
• What is Express?<br />
• Getting Started with Express<br />
• Routing with Express<br />
• Serve Static Content with Express<br />
• Route Methods<br />
• Lab 19: Routing<br />
• Lab 20: More Routing<br />
• Express Middleware<br />
• Creating Endpoints<br />
• Using the next object<br />
• The res object<br />
• Route Parameters<br />
• Lab 21: The req and res Objects<br />
• Lab 22: Implementing the GET method<br />
• Lab 23: Implementing the POST method<br />
• Lab 24: Implementing the DELETE method<br />
• Lab 25: Implementing the PUT method<br />
• Lab 26: Middleware<br />
• Database Access with Node.js<br />
• Using an Object Data Model (ODM) or an Object Relational Model (ORM).<br />
• Mongoose<br />
• mongod and mongo<br />
• Lab 27: Vue and Mongo