Introduction to Vue 3 Training

Introduction to Vue 3 Training (VUE103)

Course Length: 2 days
Delivery Methods: Multiple delivery options
Course Overview

This Vue.js 3 training class is a hands-on, practical course for learning Vue.js. You should know HTML and JavaScript well, and you should be comfortable with CSS, meaning that you know what CSS rules are and how to apply them with classes and styles.

The course begins with a simple “Hello, Vue!” app and then takes you through the process of creating a small, but featureful math app like the one at https://www.mathificent.com. Through learning to build this application, you will gain the skills you need to build many different types of Vue.js applications.

Course Benefits
  • Learn to create a new Vue project from scratch.
  • Learn to properly structure a Vue project.
  • Learn to use Vue templates.
  • Learn to break a Vue app into components.
  • Learn to pass data between components.
  • Learn to work with dynamic data.
  • Learn to use Vue.js directives.
  • Learn to use conditional rendering with v-if, v-else-if, and v-else.
  • Learn to bind HTML elements to fields with v-model and v-bind.
  • Learn to create event listeners with v-on.
  • Learn to use v-for to loop through code.
  • Learn to emit events from child components.
  • Learn to listen for events in parent components.
  • Learn to pass data in event emitters.
  • Learn to work with Vue routing.
  • Learn to use all these skills to create a dynamic single-page game application.
Available Delivery Methods
Private Class
Private classes are delivered for groups at your offices or a location of your choice.
Self-Paced
Learn at your own pace with 24/7 access to an On-Demand course.
Course Outline
  1. Getting Started with Vue.js
    1. Unpacking Vue.js
    2. Exercise: Vue.js Hello, World!
    3. Introducing Our Project: Mathificent
    4. Exercise: Get Started with vue-cli
    5. Exercise: Learning the Structure of a Vue App
  2. Basic Vue Features
    1. The Vue Instance
    2. Writing Vue Templates
    3. Exercise: Writing Templates
    4. Using Components Inside Components
    5. Exercise: Breaking an App into Components
    6. Passing Data to Child Components
    7. Dynamic Data in Templates
    8. Computed Properties
    9. The data and method Objects
  3. Directives
    1. Directives
    2. Conditionals with v-if / v-else-if / v-else
    3. Two-way Binding with v-model
    4. One-way Data Binding, Repeating, and Event Handling
    5. Emitting Custom Events
  4. Implementing Game Logic
    1. Exercise: Passing Data Between Components
    2. Exercise: Vue Data Binding
    3. Exercise: Implementing Conditional Rendering
    4. Exercise: Improving the Form Layout
    5. Exercise: Making the Game UI
    6. Exercise: Capturing Form Events
    7. Exercise: Setting the Equation
  5. Transitions and Animations
    1. Using the transition Component
    2. Exercise: Adding the Timer
    3. Exercise: Adding Transitions
    4. Exercise: Catching Keyboard Events
  6. Vue Routing
    1. Introducing Vue.js Routing
    2. Routing with Vue Router
    3. Implementing Routes
Class Materials

Each student will receive a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this Vue class:

  • HTML
  • JavaScript
  • Basic CSS
Prerequisite Courses

Courses that can help you meet these prerequisites:

Live Private Class
  • Private Class for your Team
  • Live training
  • Online or On-location
  • Customizable
  • Expert Instructors
Request Proposal
Self-Paced Course
2 coupons
  • On Demand 24/7
  • Readings
  • Presentations
  • Exercises
  • Quizzes
  • Full Year of Access
  • Learn more
Register Now