Build Your First Vue.js App
Get started with Vue 2 by learning the basic features and building a real Vue app!
I. Introduction
| 1. Introduction (02:26) |
II. Setting up the project
| 2. Starter code installation (04:45) | |
| 3. Running the server and viewing the project (02:20) | |
| 4. Tour of the project files (02:36) | |
| 5. Including Vue in the project (02:58) | |
| 6. Creating an instance of Vue (01:30) | |
| 7. Rendering data on the page (01:56) | |
| 8. Understanding directives (02:43) | |
| 9. Adding a method (03:58) | |
| 10. Rendering the list of products (03:54) | |
| 11. Adding key to iterated products (02:31) |
III. Building the shopping cart
| 12. Creating the cart (01:32) | |
| 13. Understanding reactivity (01:28) | |
| 14. Vue Devtools (01:30) | |
| 15. Adding products to the cart (02:41) | |
| 16. Displaying cart items (02:25) | |
| 17. Hiding cart if empty (02:20) | |
| 18. Adding quantity to cart items (02:34) | |
| 19. Cart items quantity logic (02:54) | |
| 20. Understanding filters (01:24) | |
| 21. Formatting price (02:41) | |
| 22. Adding quantity buttons to template (02:08) | |
| 23. Implementing `inc` and `dec` logic (02:53) |
IV. Adding product search
| 24. Adding search button (03:40) | |
| 25. Adding search input (03:14) | |
| 26. Overview of vue-resource (01:46) | |
| 27. Overview of API (02:04) | |
| 28. Adding vue-resource to project (02:06) | |
| 29. AJAX call for products (02:47) |
V. Building the product list
| 30. Replacing dummy items (02:31) | |
| 31. Adding product image & price (03:04) | |
| 32. Adding search result count to product list (03:33) | |
| 33. Adding the loading message (05:02) | |
| 34. Understanding lifecycle hooks (02:46) | |
| 35. Default search on page load (02:29) | |
| 36. Understanding transitions (03:56) | |
| 37. Fading in cart total (04:27) | |
| 38. Fading in cart items (02:32) |
VI. Scroll loading products
| 39. How scroll load works (04:26) | |
| 40. Adding a sensor element (02:47) | |
| 41. Scroll monitor setup (02:52) | |
| 42. Triggering code with scroll monitor (04:24) | |
| 43. Appending items (03:55) | |
| 44. Fixing search results (03:02) |
VII. Adding finishing touches
| 45. Hiding elements before Vue compiles them (05:12) |