Web Applications with Vue.js, Node.js, and MongoDB (MEVN100)
In this 5-day course, students will start with an optional review of advanced JavaScript, followed by the fundamental concepts and structures of Vue.js development. Students will use Vue.js to build a real-world frontend application through a series of hands-on labs.
In the 2nd part of the course, students will learn the fundamentals using Node and Express to build an API for the Vue frontend application using a MongoDB database.
Students will then connect the Vue frontend with the Node.js backend.
Professional Vue.js is a complete introduction to modern full-stack development. It covers the syntax, conventions, and best practices of modern JavaScript development while also teaching Vue.js, Node.js, and MongoDB. Through a series of hands-on exercises and demonstrations, students will learn how to develop and test complete Vue/Node/Mongo applications.
After taking this course, students will be able to:
- Install, configure, and use modern web tooling
- Create test suites for Vue
- Understand what Vue.js is and what problem it solves
- Know the basic architecture of a Vue.js application
- Build a Single Page Application with Vue Router
- Use Pinia for maintaining state in a Vue.js application
- Use Vue best practices
- Know how to code web applications and RESTful APIs with Node.js
- Connect Node.js to MongoDB
- Basic JavaScript (optional)
- How JavaScript Works
- JavaScript Syntax
- JavaScript Data Types
- JavaScript Primitives
- Variables and Arrays
- Creating and Using Variables
- Variable Scoping with const and let
- Creating and Using Arrays
- JavaScript Operators
- Template Literals
- Functions
- Arrow Functions
- JavaScript Objects
- Prototypal Inheritance
- Advanced JavaScript (optional)
- Default Parameter Handling
- Rest Parameter
- Spread Operator
- Tagged Template Literals
- Enhanced Object Properties
- Property Shorthand
- Method notation
- Array Matching
- Object Matching
- Symbol Primitive
- For-Of Operator
- Creating and Consuming Generator Functions
- Class Definition
- Class Inheritance
- Understanding this
- Array.map()
- Array.filter()
- Array.reduce()
- Promises
- Async / Await
- TypeScript Basics
- Vue QuickStart
- What is Vue.js?
- Vue vs React and Angular
- Virtual DOM
- What's New in Vue 3
- Two ways to write Vue Components
- Options API
- Composition API
- Code Editors and IDEs
- Volar extension
- Lab 01: Vue 3 Quick Start
- Lab 02: Your First Component
- Lab 03: Create More Components
- Lab 04: Testing Vue
- Lab 05: Manual In-Browser Testing and Debugging
- Getting Started With Vue.Js
- Basic Vue.Js Features
- Creating and Mounting a Vue App
- Configuring an App
- Which Style Should You Use?
- Vue Templates
- Using HTML in Templates
- Using JavaScript in Templates
- Vue.js Directives
- Directive Arguments
- Directive Modifiers
- Vue.js Default Directives
- Custom Directives
- Loops and Lists
- Using key
- Using v-for
- v-for with Arrays
- v-for with Objects
- Conditional Rendering
- v-if vs. v-show
- Lab 06: Static Version
- Using Filters
- Formatting Currencies with Filters
- Formatting Dates with Filters
- Binding HTML Classes
- Adding Styles Conditionally
- Binding Styles
- Lab 07: Styling Vue Components
- Computed Properties
- Benefits of Computed Properties
- Filtering / Sorting a List with a Computed Property
- Using Setters in Computed Properties
- Lab 08: Computed Properties
- Vue State
- Vue Instance's data object
- ref() and reactive()
- Using ref()
- Using reactive()
- Vue.js Data Binding
- v-bind directive
- Value Binding
- 2-way Binding
- v-model directive
- Mutating Arrays
- Array Mutations Vue Can't Detect
- Object Mutuation Vue Can't Detect
- v-bind shorthand
- Vue with TypeScript
- Lab 09: Methods and State + TypeScript
- Event Handling
- Inline Event Handling
- Event Handling with Methods
- Event Modifiers
- v-on shorthand
- Listening to Child Component Events
- Emitting a Value With an Event
- Lab 10: Events
- Watchers
- Async Operations with Watchers
- Vue Instance Lifecycle
- Using Lifecycle Hooks
- Lab 11: Component Lifecycle
- Vue and Forms
- Input Bindings
- 2-way Binding Pros and Cons
- Creating a Form with Checkboxes
- Creating a Form with Radio Buttons
- Creating a Form with a Select Element
- Input Modifiers
- Lab 12: Forms
- Vue Components
- What are Vue Components?
- Creating a Component
- Organizing and Reusing Components
- Naming Components
- Global Components
- Local Components
- Global vs. Local
- Passing Data
- Using Props
- Single Root Element
- Using v-model on Components
- v-model and components
- Content Distribution with Slots
- Lab 13: Slots
- Loading Your Components Asynchronously
- Lab 14: Composition API
- Introducing Pinia
- Defining a Store
- Pinia Store Example with Options
- Pinia Store Example with Composition
- State
- Getters
- Actions
- Lab 15: Pinia
- Single-Page Applications
- Creating an SPA with Vue-Router
- Vue-Router Template
- Vue-Router JS
- Lab 16: Routing
- Lab 17: AJAX with Pinia
- Transitions and Animations
- Custom Transition Classes
- Optional Lab: Transitions and Animation
- Intro to Node.js
- What is Node.js?
- How Does Node.js Work?
- Blocking code
- Non-Blocking code
- V8 JavaScript Engine
- Node's REPL
- Running a Node.js program
- Lab 18: Basic Setup
- Callbacks
- Modules Overview
- CommonJS Example
- Using Modules
- Modules vs. Packages
- Sources of Modules
- Node's Core Modules
- Buffer Objects
- Modularizing Your Code
- Returning Values from Modules
- Using a Local Module
- Optional Lab: Creating Modules
- ES6 Modules
- events and Streams
- Non-blocking with Events
- Events
- Node Stream Objects
- Using Readable Streams
- Using Writable Streams
- Other Streams
- Optional Lab: Working with Streams
- The pipe method
- Optional Lab: Piping Between Streams
- The process Object
- Command Line Arguments
- Optional Lab: The process object
- Understanding Callbacks
- Using Node's Error Convention
- Node on the Web
- How the Web Works
- HTTP
- HTTP Methods
- RESTful Web Services
- Using Express
- What is Express?
- Getting Started with Express
- Routing with Express
- Serve Static Content with Express
- Route Methods
- Lab 19: Routing
- Lab 20: More Routing
- Express Middleware
- Creating Endpoints
- Using the next object
- The res object
- Route Parameters
- Lab 21: The req and res Objects
- Lab 22: Implementing the GET method
- Lab 23: Implementing the POST method
- Lab 24: Implementing the DELETE method
- Lab 25: Implementing the PUT method
- Lab 26: Middleware
- Database Access with Node.js
- Using an Object Data Model (ODM) or an Object Relational Model (ORM).
- Mongoose
- mongod and mongo
- Lab 27: Vue and Mongo
Each student will receive a comprehensive set of materials, including course notes and all the class examples.
Experience in the following is required for this Vue class:
HTML, CSS, and prior programming experience
Experience in the following would be useful for this Vue class:
JavaScript, databases
Live Private Class
- Private Class for your Team
- Live training
- Online or On-location
- Customizable
- Expert Instructors