/vue-study-jam

Primary LanguageHTML

Vue Study Jam

Welcome to the Vue Study Jam! This study jam is designed to help you learn Vue.js and build awesome web applications. Below are some resources that you may find helpful:

Progress till now....

Excercise 2

The Book List (20 mins)

Steps involved:

  1. Use create-vue to create your own vue project after forking the repo in submissions folder inside your username folder - here

    The submissions must be done in submission folder forking the repo branch - to fetch latest changes to your local refer google as source :D

    ./submissions/the-book-list/[Your-Username]/[project-name]

  2. You will be having App.vue as one - and you need to create a component called BookList to list books with name of the book, author, genre, year - clue: use props

  3. create another component BookForm form to add new books to the list - clue: use emits

  4. Inside App Component use watch to update the heading of the page with the the latest book added - or top

  5. Use computed to display the number of books

  6. Create a layout - at first to divide the section for each component in App to wrap itself - clue: use slots

Excercise 1

Fav movie/anime/series ola characters list - form for adding characters - A section for faviortie list - a button for adding characters to faviortie list

Some VScode Extensions

Extension Pack 🚀

Documentation

  • Vue.js Official Documentation - The official documentation for Vue.js. It provides a comprehensive guide to understanding and using Vue.js. 📚

Packages

  • Vue Router - The official router for Vue.js. It allows you to create single-page applications with client-side routing. 🚦

  • Vuex - The official state management library for Vue.js. It helps you manage the state of your application in a predictable way. 🗃️

  • Pinia - Pinia - The intuitive store for Vue.js - Type Safe, Extensible, and Modular by design. Forget you are even using a store. 🛍️

Repositories

  • Vue CLI - The official command-line interface for Vue.js. It provides a set of tools for scaffolding and managing Vue.js projects. ⚙️

  • Awesome Vue - A curated list of awesome Vue.js libraries, resources, and projects. 🌟

Examples

  • Vue.js Examples - A collection of Vue.js examples and demos to help you learn and explore different aspects of Vue.js. 💡

Feel free to explore these resources and use them to enhance your learning experience. Happy coding! 👩‍💻👨‍💻