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



