/vue-intro

Introduction to Vue

This workshop serves as a basic intro of Vue and Vuex.

Open presentation slides

Workshop agenda

  1. Create a todo item (Basic component structure)
  2. Create a todo list (slot basics)
  3. Populate todo item with text (props)
  4. Repeat todo item in todo list (Repeating content with v-for)
  5. Add new todo items (Event handling, Dynamic view with v-model)
  6. Hide add button (Dynamic content with v-if)
  7. Add done button for todo items (Dynamic classes)
  8. Add delete button (Event handling, update lists)
  9. Edit todo items (Update list)

Time estimate: ~4 hours

Intended audience

This workshop if fairly basic and intended for those interested in frontend development, and with a basic understanding of HTML, CSS and some JavaScript.

What you need

  • Google Chrome

Get started

Repeat the first few pages in the presentation slides

The TODO app

This course guides you through the process of creating a TODO app.

Exercises

This repository contains a set of exercises organized in folders. Each folder contains a README.md describing the exercise.

Each README contains a description with a set of tasks marked with this symbol: :pencil2:.