Vue.js Basics Course

Go to class
Write Review

Free Online Course: Vue.js Basics Course provided by Treehouse is a comprehensive online course, which lasts for 2-3 hours worth of material. The course is taught in English and is free of charge.

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

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