Vue Todo List

The goal of today's lab is to understand how to use the JavaScript framework Vue to create a reactive web page.

Using Vue to create an app to keep track of a list of things to do seems to be the canonical example — you can literally find dozens of tutorials using this example to show off a variety of simple to complex Vue features. Our version of the exercise starts you with the static HTML elements that you will make reactive using Vue so that you can add, check off as done, and remove completed todo items. It will automatically keep track of how many todo items you have left to complete and provides buttons to allow viewing all, just the active items, or just the completed items. Finally, you can remove all of the items that are checked as done using the "Clear completed" button that only appears when one or more items have been checked (i.e., it is hidden when all items are active).

For this example, the to do items will simply be stored in a JavaScript data structure so they will be erased each time the page is loaded.

You are encouraged to install the Vue Devtools Chrome extension to help you explore, understand, and debug adding Vue to the elements you will be making reactive.

Getting Started

The basic files and site structure are already set up for you on GitHub. Start by accepting the lab repository to create your own version (you can find the link using the Resources tab on Piazza). If you are working with a partner, choose one person to do this and make sure that both people's NetIDs are in the comment at the top of the JavaScript file to ensure both people get credit for doing the lab.

To get started, look at the provided index.html and todo_list.js code to understand what elements you have to work with.

Submission

At the end of class, push your new files to the lab-vue-GIT_SCREEN_NAME repository on GitHub to submit your work. If you worked in a pair, make sure both people's NetIDs are in the comment at the top of the todo_list.js file.