Git Product home page Git Product logo

vuejs-challenges's Introduction

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

vuejs-challenges's People

Contributors

enoooch avatar flippedround avatar github-actions[bot] avatar heappynd avatar murongg avatar saxon-y avatar selemondev avatar webfansplz avatar yuyinws avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.