Sorting Algorithm Visualizer Tutorial with Vue 3 in 5 mins ( Bubble Sort Example - Vue Basics )
Quick tutorial using Vue 3 to create a sorting algorithm visualizer. By using bubble sort as the core example this can be replicated on other algorithms like quick sort, insertion sort etc.... You just need to place the sleep function in the right place to display the swapping.
I've added 2 methods for creating this project. 1 using the Vue CLI and the other using only 2 files one html and the other JS. The latter is more manual and basic.
Skip to 3:36 for a really quick version if you understand the basics of Vue.
0:00 - Demo of project
0:08 - Method 1: Vue CLI Create Project
1:05 - Clean up
1:00 - Create the Visualizer
2:29 - Add Styling
3:01 - Test + Modify timeout
3:36 - Create Visualizer without CLI
Method 1 Code: https://github.com/Jasoncheung94/yout...
Keep note this is only the App.vue.
Method 2 Code: https://github.com/Jasoncheung94/yout...
If you need to install Vue CLI - Check out my other video • How to install and use Vue CLI (Quick exam...
Music:
------------------------------------------------
Days Like These by LAKEY INSPIRED / lakeyinspired
Creative Commons — Attribution-ShareAlike 3.0 Unported — CC BY-SA 3.0
Free Download / Stream: https://bit.ly/days-like-these_
Music promoted by Audio Library • Video
------------------------------------------------