/vuejs-challenges

Collection of Vue.js challenges

Primary LanguageTypeScriptMIT LicenseMIT

Collection of Vue.js challenges

English | 简体中文

📖 Introduction

I love Vue.js ♥️. It's so Awesome 🚀. It helps me finish my work well and build applications.

I was looking for a project for everyone to learn Vue.js together, and that's why this project was born. I believe we can grow together here, and hope it helps you.

This project is aimed at helping you better understand Vue.js, writing your own utilities, or just having fun with the challenges.

We are also trying to form a community where you can ask questions and get answers you have faced in the real world - they may become part of the challenges!

✏️ Challenges

Click the following badges to see details of the challenges.

1
1・Hello World

13
2・ref family 3・losing-reactivity 4・writable-computed 5・watch family 6・shallow ref 9・Dependency Injection 10・Lifecycle Hooks 11・Next DOM update flush 13・DOM Portal 14・Dynamic css values 243・prevent event propagation 305・Capitalize 323・Prop Validation

14
7・Raw API 8・effectScope API 12・Optimize performance directive 15・useToggle 16・until 17・useCounter 18・useLocalStorage 19・v-focus 20・v-debounce-click 21・functional component 25・useMouse 27・Global CSS 218・render function[h()] 232・Key Modifiers

5
22・custom element 23・custom ref 24・v-active-style 26・v-model 208・Tree Component

By Tags
#Built-ins13・DOM Portal 12・Optimize performance directive
#CSS Features14・Dynamic css values 27・Global CSS
#Components13・DOM Portal 323・Prop Validation 21・functional component 218・render function[h()] 208・Tree Component
#Composable Function15・useToggle 17・useCounter 18・useLocalStorage 25・useMouse
#Composition API2・ref family 3・losing-reactivity 4・writable-computed 5・watch family 6・shallow ref 9・Dependency Injection 10・Lifecycle Hooks 8・effectScope API 23・custom ref
#Directives305・Capitalize 12・Optimize performance directive 19・v-focus 20・v-debounce-click 24・v-active-style 26・v-model
#Event Handling243・prevent event propagation 232・Key Modifiers
#Global API:General11・Next DOM update flush
#Lifecycle10・Lifecycle Hooks
#Reactivity:Advanced6・shallow ref 7・Raw API 8・effectScope API 23・custom ref
#Reactivity:Core2・ref family 4・writable-computed 5・watch family
#Reactivity:Utilities3・losing-reactivity
#Utility Function16・until
#Web Components22・custom element

🤝 How to Contribute

There are several ways you can contribute to this project

  • Share your answers/solutions
  • Propose new challenges
  • Add more test cases to the existing challenges
  • Provide learning resources or ideas of how to solve challenges
  • Share the problems you have faced in real-world projects, regardless you have the solution or not - the community would help you as well.
  • Help others by discussing issues

Just open an issue and choose the corresponding template. Thanks!

🌸 Credits

This project is highly inspired by type-challenges ♥️.

vuejs/repl makes this project possible ♥️.

📄 License

MIT LICENSE