Professional Vue.js with Node.js and MongoDB

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.

Categories: , Tags: , , ,

Description

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.

TARGET AUDIENCE

This course is designed for experienced front-end web developers who wish to begin using Vue and Node.

OBJECTIVES

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

TOPICS

  • Modern JavaScript tooling
  • Debugging JavaScript
  • Object-oriented JavaScript
  • All the basic Vue capabilities and features
  • Communication between components
  • Data binding
  • Communication with the server via Ajax
  • State management with Vuex
  • Creating SPAs with Vue
  • Asynchronous JavaScript – promises, async/await (time permitting)
  • Animation and Transitions in Vue (time permitting)
  • Fundamentals of Node.js
  • Using Express to build web applications and APIs
  • MongoDB

Prerequisites

Before taking this course, students should have solid experience with HTML5, CSS3, and JavaScript

Duration

Five days

OUTLINE

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

Related products