Articles
Latest
More
Newsletter Sponsorship Discord About
Sign up for our Newsletter
  • All courses
  • Your courses
  • In progress
Articles
Latest
More
Newsletter Sponsorship Discord About
Sign up for our Newsletter

Build Your First Vue.js App

Get started with Vue 2 by learning the basic features and building a real Vue app!

Enroll in this course or log in
  • About
  • Curriculum
  • Resources
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)

Back to courses

Articles
  • Latest
Newsletter
  • Join
  • Sponsorship
More
  • Discord
  • Vue.js jobs
  • About

Vue.js Developers © 2021. View our privacy policy .

  • RSS
  • |
  • Atom