- 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.
Public expert-led online training from the convenience of your home, office or anywhere with an internet connection. Guaranteed to run .
Private classes are delivered for groups at your offices or a location of your choice.
Learn at your own pace with 24/7 access to an On-Demand course.
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.
- Getting Started with Vue.js
- Unpacking Vue.js
- Exercise: Vue.js Hello, World!
- Introducing Our Project: Mathificent
- Exercise: Get Started with vue-cli
- Exercise: Learning the Structure of a Vue App
- Basic Vue Features
- The Vue Instance
- Writing Vue Templates
- Exercise: Writing Templates
- Using Components Inside Components
- Exercise: Breaking an App into Components
- Passing Data to Child Components
- Dynamic Data in Templates
- Computed Properties
- The data and method Objects
- Conditionals with v-if / v-else-if / v-else
- Two-way Binding with v-model
- One-way Data Binding, Repeating, and Event Handling
- Emitting Custom Events
- Implementing Game Logic
- Exercise: Passing Data Between Components
- Exercise: Vue Data Binding
- Exercise: Implementing Conditional Rendering
- Exercise: Improving the Form Layout
- Exercise: Making the Game UI
- Exercise: Capturing Form Events
- Exercise: Setting the Equation
- Transitions and Animations
- Using the transition Component
- Exercise: Adding the Timer
- Exercise: Adding Transitions
- Exercise: Catching Keyboard Events
Each student will receive a comprehensive set of materials, including course notes and all the class examples.
- Basic CSS