This course was created with the
course builder. Create your online course today.
Start now
Create your course
with
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
[MB] Build Your First Vue.js App
A. Introduction
1. Introducing the course (2:25)
B. Setting up the project
2. Starter code installation (4:44)
3. Running the server and viewing the project (2:19)
4. Touring the project files (2:35)
C. Up and running with Vue
5. Including Vue in the project (2:58)
6. Creating an instance of Vue (1:29)
7. Rendering data on the page (1:55)
8. Understanding directives (2:43)
9. Adding a method (3:57)
10. Rendering the list of products (3:54)
11. Adding key to iterated products (2:31)
D. Building the shopping cart
12. Creating the cart (1:31)
13. Understanding reactivity (1:28)
14. Vue Devtools (1:30)
15. Adding products to the cart (2:40)
16. Displaying cart items (2:24)
17. Hiding cart if empty (2:20)
18. Adding quantity to cart items (2:34)
19. Cart items quantity logic (2:53)
20. Understanding filters (1:24)
21. Formatting price (2:40)
22. Adding quantity buttons to template (2:07)
23. Implementing inc and dec logic (2:53)
E. Adding product search
24. Adding search button (3:40)
25. Adding search input (3:13)
26. Overview of vue-resource (1:46)
27. Overview of API (2:04)
28. Adding vue-resource to project (2:05)
29. AJAX call for products (2:46)
F. Building the product list
30. Replacing dummy items (2:30)
31. Adding product image & price (3:04)
32. Adding search result count to product list (3:33)
33. Adding the loading message (5:02)
34. Understanding lifecycle hooks (2:45)
35. Default search on page load (2:29)
36. Understanding transitions (3:55)
37. Fading in cart total (4:26)
38. Fading in cart items (2:31)
G. Scroll loading products
39. How scroll load works (4:26)
40. Adding a sensor element (2:47)
41. Scroll monitor setup (2:52)
42. Triggering code with scroll monitor (4:24)
43. Appending items (3:55)
44. Fixing search results (3:01)
H. Adding finishing touches
45. Loading indicator with v-cloak (5:11)
7. Rendering data on the page
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock