What you'll learn
In this project you’ll follow along with our instructions and build a reading list application with Vue.js 2.x. You'll create multiple components that are connected together to display a list of authors and book titles, and you'll create a form that adds new books to the list.
Table of contents
Setup
15m
- Set up your local environment for projects. We'll walk you through everything you need to know, including how to install and configure your environment to be able to complete all of the tasks.
Creating the BookList Component
15m
- Write code to create a Vue component called BookList that displays a list of book titles and authors.
Looping Through a List of Books
15m
- Write code that reads a list of book titles and authors from an array and displays them in a Vue component.
Creating a Child Component
10m
- Refactor a BookList component into two components - BookList and BookItem.
Connecting BookItem as a Child Component of BookList
10m
- Connect a child BookItem component to a parent BookList component.
Creating a BookForm Component
25m
- Create a BookForm component that calls a method on submit that adds a new title and author to an array of books and updates the display.
About the author
Hampton is an old fart dev that dabbles in data and security, and now teaches full time here at PS. He is bound to teach you something - leading through example and subjective opinion. He is an acquired taste, sweet on the inside with a sour exterior. He also loves honest feedback, so don't hold back.
