Vue.js Basics Course (How To)

Vue.js is a front end JavaScript framework with a gentle learning curve. Vue’s lower barrier to entry, ease of use and fantastic documentation make it a fun and accessible technology.

In this course, you’ll learn fundamental concepts that will help you get up and running with Vue. You’ll also gain skills and foundational knowledge that will help prepare you to tackle the complexities of other frameworks.

What you'll learn

• What is a front end framework?
• Templating and data binding
• Methods and directives
• Event Handling
• Simple animation

Introducing Vue

In this stage, we’ll build an understanding of JavaScript frameworks -- what they are, when to use them, and why Vue.js is a great choice. You'll learn how to add Vue to a project using a CDN and get familiar with the basic Vue syntax.

Chevron 5 steps

• Introducing Vue.js

  3:17

• Frameworks, Vue, and You

  3:24

• Add Vue to a Project

  2:17

• Hello Vue

  6:15

• Introducing Vue Quiz

  5 questions

What a Beautiful Vue!

Explore the power of templating with Vue, including event handling, conditional rendering, and using Vue directives.

Chevron 6 steps

• Marvelous Mustaches

  4:01

• Introducing Vue Directives

  5:16

• What a Beautiful Vue Quiz 1

  6 questions

• Basic Event Handling

  5:53

• Add interactivity with v-show and v-on

  9:02

• What a Beautiful Vue Quiz 2

  5 questions

Sweeping Vues: Loops, Methods, Directives

Use Vue to loop through multiple items in an array. Learn more about Vue directives, including how to use computed properties and how to bind classes and styles to a template.

Chevron 9 steps

• Vue Devtools

  4:16

• List Rendering with v-for

  7:29

• Getting Loopier

  9:11

• v-show vs. v-if

  2:29

• Sweeping Vues Quiz 1

  5 questions

• Events: Toggling and Filtering

  10:00

• Computed Properties

  8:51

• Conditionally Adding or Removing Classes

  6:44

• Sweeping Vues Quiz 2

  5 questions

Building a Flashcard App

Apply what you've learned about Vue so far to build a fun and interactive flashcard app! Learn about more Vue directives, such as v-model.

Chevron 8 steps

• Displaying and Flipping Cards

  7:52

• Getting User Input

  4:22

• Creating a New Card

  4:21

• Deleting a Card

  1:53

• Flip Transition!

  5:54

• Error Handling and Enhancements

  5:20

• Building a Flashcard App Quiz

  5 questions

• Going Further with Vue

  1:23