Introduction to Vue.js

Course Overview

This Vue.js 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:

  • 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.

Course Outline

  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
  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
  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
  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
  1. Using the transition Component
  2. Exercise: Adding the Timer
  3. Exercise: Adding Transitions
  4. Exercise: Catching Keyboard Events

₦ 20,000

  • Learn at your own pace with 24/7 access
  • Duration: 1 year
× How can we help you?