One Day Introduction to Vue.js with Hassan Djirdeh [Workshop]

Vue is "the progressive framework" for building user interfaces. For the last few years, it's been one of the fastest-growing software projects in the world, thanks to its intuitive API, great docs, and first-class tooling. In this hands-on workshop, Hassan Djirdeh, author of Fullstack Vue, shares the Vue philosophy, demonstrates how it helps you solve common UI problems, and teaches how to integrate Vue into your existing apps.

The code examples and slides for this course can be found in this repository:


In this lesson, Hassan gives an introduction to and overview of Vue.js as a JavaScript UI framework built to be "approachable, versatile and performant". As part of this introduction to Vue, students will learn about:

  • Instances: The heart of every Vue application
  • Data: An option that is an object
  • Mustache Syntax
  • Directives: A special type of command that can be added to HTML content. The 5 most common directives include v-bind, v-if/v-show, v-for, v-on, and v-model.

Hassan concludes this lesson with a practice exercise on building an "Up Vote" application.

Up Vote Exercise

Before moving on, challenge yourself with the Up Vote Excercise explaned by Hassan around 43:40.

Exercise Goals
  • Dynamically render content from the submissions object.
  • Render a list of submission elements with the help of the v-for directive.
  • Allow the increment of submission votes by clicking the upvote arrow icon.
  • BONUS: Conditionally add a blue border (i.e. .blue-border class) around a submission post when a submission reaches 20 votes.

You can use this code as your starting point:

When you're done, check the box and move on to the next chapter!