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)
6. Creating an instance of Vue
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock
course builder. Create your online course today.
Start now
course builder. Create your online course today.
Start now
course builder. Create your online course today.
Start now