Introduction to Vue.js Training

Request an offer for delivery of this course

Course duration

Course Benefits

  • Starting a new Vue project.
  • Structuring a Vue project.
  • Vue templates.
  • Breaking a Vue app into components.
  • Passing data between components.
  • Dynamic data.
  • Vue.js directives.
  • Conditional rendering with v-if, v-else-if, and v-else.
  • Binding HTML elements to fields with v-model and v-bind.
  • Creating event listeners with v-on.
  • Looping with v-for.
  • Emitting events from child components.
  • Listening for events in parent components.
  • Passing data in event emitters.
  • Working with your new Vue skills.
  • The transition Component.
  • Adding a timer.
Available Delivery Methods
Public Class
Public expert-led online training from the convenience of your home, office or anywhere with an internet connection. Guaranteed to run .
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

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.js class:

  • HTML
  • JavaScript
  • Basic CSS
Prerequisite Courses

Courses that can help you meet these prerequisites:

Since its founding in 1995, InterSource has been providing high quality and highly customized training solutions to clients worldwide. With over 500 course titles constantly updated and numerous course customization and creation possibilities, we have the capability to meet your I.T. training needs.
Instructor-led courses are offered via a live Web connection, at client sites throughout Europe, and at our Geneva Training Center.