Comprehensive Vue.js Programming

2-Day Course Taught Live as In-Person or Online

Course Description

Training 4 Developers’ Comprehensive Vue.js Programming training course teaches attendees how to build rich client-side web applications using HTML, CSS, JavaScript, and Vue.js. Students develop real-world JavaScript and Vue.js applications and learn how to use modern JavaScript programming techniques with an emphasis on core JavaScript concepts, the latest JavaScript syntax features, and popular user interface (UI) development with Vue.js. This class is for developers with modern JavaScript experience but wish to learn to Vue.js. React and Angular developers looking to add a new UI library to their skillset will greatly benefit from this class. Also, this class is for developers who want to learn how to create UIs using a popular and modern JavaScript library.

Students will build a project using Vue.js to apply their JavaScript skills and to learn about modern UI development. Developers can do wonders with Vue.js, an ecosystem that scales between a library and a full-featured framework. This course teaches all that you need to know about Vue to create modern interactive web applications. Students will learn the basics, such as lists and filters, and then progress to advanced features such as using Jest for unit testing JavaScript and Vue.js applications, building component-based UIs, and much more!

Course ObjectivesObjectives

  • Develop real-world JavaScript applications with Vue.js
  • Use the basic features of Vue.js to create dynamic templates, directives and components
  • Identify how to improve performance using computed properties and watchers
  • Incorporate styling, event handling and forms
  • Utilize the Vue CLI to build a Single Page Applications powered by Webpack
  • Drive Vue.js application data from a REST API using the fetch API, promises and async/await

Course PrerequisitesPrerequisites

Attendees should have a good working knowledge of HTML, CSS, ES2015 JavaScript and web development. Also, students should have general programming experience.

Course RequirementsRequirements

We teach all classes online using Zoom. Students will need to be able to join a Zoom session. We recommend that each student have two displays. One display to view the instructor presentation and one display to use for note-taking and coding along with the instructor. All course materials are distributed via GitHub and Google Drive. Access to those services is needed for the class, please ensure your firewall and network policies will allow students to access those resources.

Course OutlineOutline

The course can be taught in either the JavaScript or the TypeScript languages. Knowledge of JavaScript is needed for both language versions of the course. Knowledge of TypeScript is NOT needed for the TypeScript version.

  1. Introduction to Vue.js
    1. What is Vue.js?
    2. What are Single Page Applications?
    3. What is a Progressive Framework?
    4. What is a Reactive Framework?
    5. Overview of Modern Web Development
  2. Getting Started
    1. How to Include Vue.js on a Web Page
    2. Using a Script Element
    3. Using a CDN
    4. Using NPM
    5. Using the Vue CLI
    6. What is Webpack?
    7. Exploring Vue Documentation
    8. Exploring Vue Cookbook
    9. Debugging with Visual Studio Code
    10. Vue Web Browser Developer Tools
  3. Displaying Data with Templates
    1. Vue Instance
    2. Implementing Data and Methods
    3. Understanding the Lifecycle
    4. Using Templates
    5. Understanding the Virtual DOM
    6. Mustache Syntax
    7. Expression Interpolations
    8. Outputting Plain-Text vs. Raw HTML
    9. Setting Attributes
    10. JavaScript Expressions
    11. Short Hand Syntaxes
    12. Using Filters
    13. Creating Custom Filters
    14. Using JSX
  4. Conditional Rendering
    1. Using Model Data and Logic when Rendering
    2. Using the v-if, v-else, v-else-if Directive
    3. Using the v-show
    4. Differences between v-if and v-show
    5. Using the v-for to display a list of data
    6. Combining v-if with v-for
  5. Collecting Data with Forms
    1. Review of HTML Form Elements
      1. Input: Text, Checkbox Radio
      2. Select: Single, Multiple
      3. Textarea
    2. Connecting HTML Form Elements with Model Data using v-model
    3. Using v-model Modifiers
      1. Lazy Model Updates
      2. Converting Model Data to a Number Type
      3. Trimming Whitespace
    4. Form Validation
  6. Handling Events
    1. What are Events?
    2. Using the v-on directive to configure event handlers
    3. Coding event handler methods
    4. Using Inline Handlers
    5. Event Modifiers
      1. Stop
      2. Prevent
      3. Capture
      4. Self
      5. Once
      6. Passive
    6. Working with Keyboard Keys
  7. Custom Directives
    1. What are Custom Directives?
    2. Directives vs. Components
    3. Binding a Directive to an Element
    4. Configuring Directive Bindings
    5. Hook Functions
    6. Directive Hook Arguments
  8. Building with Components
    1. What are components?
    2. Custom HTML Elements
    3. Name Casing
    4. Passing Data via Props
    5. Props Casing
    6. Prop Types
    7. Static & Dynamic Props
    8. One-Way Data Flow
    9. Non-Prop Attributes
    10. Custom Events
  9. Advanced Components
    1. Global Component Registration
    2. Local Component Registration
    3. Registration within a Module
    4. Slot Content
    5. Named Slots
    6. Scoped Slots
    7. Fallback Content
    8. Dynamic Slot Names
    9. Proper DOM Tree with “is”
    10. Caching Components with Keep Alive
    11. Loading Components Asynchronously
    12. Sync Modifier
    13. Single File Components
    14. Functional Components
  10. Introduction to Routing
    1. What problem does routing solve?
    2. Using vue-router
    3. Creating a new instance of a Router
    4. Configuring a Route Table
    5. URL Parameters
    6. Catch All
    7. Handling Errors
    8. Redirects
    9. Changing Routes Programmatically
  11. Advanced Routing
    1. Nested Routes
    2. Named Routes
    3. Named Views
    4. HTML5 History
  12. State Management
    1. What is State Management?
    2. What is Redux?
    3. What is Vuex?
    4. Managing a State Tree
    5. Best Practices for Organizing a State Tree
    6. Common Misconceptions about State
    7. Forms, v-model and Vuex State
    8. Getters and Computing Derived State
    9. Performing Mutations
    10. Using Actions
    11. Using Asynchronous Actions to interact with a REST API
    12. Coverage of Fetch/Axios API as appropriate
    13. Organizing Vuex into Modules
  13. Transitions and Animations
    1. CSS Transitions and Animations
    2. Custom Transition Classes
    3. Enter and Leave Transitions
    4. List Transitions
    5. Dynamic Transitions
  14. Mixins
    1. What are mixins?
    2. Creating Mixins
    3. Using Mixins
  15. Plugins
    1. Plugin Architecture
    2. Creating a Plugin
    3. Using Community Plugins
  16. Unit Testing with Jest
    1. What is Unit Testing?
    2. JavaScript Unit Testing
    3. Unit Testing with Jest
    4. Unit Testing Custom Directives
    5. Unit Testing Components
  17. Deployment
    1. Production Mode
    2. Producing the Production Bundle
    3. Pre-Compiling Templates
    4. Tracking Runtime Errors
Scroll to Top