Introduction to Vue.js Programming

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

Course Description

Training 4 Developers’ Introduction to 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 Vue.js 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. Mustache Syntax
    6. Expression Interpolations
    7. Outputting Plain-Text vs. Raw HTML
    8. Setting Attributes
    9. JavaScript Expressions
    10. Short Hand Syntaxes
  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. Custom Events
    6. Slots
    7. Proper DOM Tree with “is”
    8. Global and Local Component Registration
  9. Unit Testing with Jest
    1. What is Unit Testing?
    2. JavaScript Unit Testing
    3. Unit Testing with Jest
    4. Testing Vue Code
Scroll to Top