Vue.js 2 Academy: Learn Vue Step by Step

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
102 Lessons (8h 30m)
    • 1. Welcome!

      2:29
    • 2. What is Vue.js and why should I use it?

      2:16
    • 3. Visual studio installation

      1:51
    • 4. Section Intro: Vue Basics

      0:30
    • 5. Download project starter

      2:32
    • 6. Installing Vue.js

      3:05
    • 7. The Vue instance & the data object

      7:28
    • 8. Templates & the virtual DOM

      3:31
    • 9. Two way data binding with v-model

      3:08
    • 10. Event handling & methods

      5:46
    • 11. List rendering

      2:54
    • 12. Conditional rendering in Vue

      5:19
    • 13. Binding elements to attributes

      4:11
    • 14. Binding styles

      4:48
    • 15. Vue shorthand syntax

      2:42
    • 16. Outputting text & HTML

      6:25
    • 17. V-if vs v-show

      3:10
    • 18. Using Javascript expressions

      4:22
    • 19. Section Outro: Vue Basics

      0:32
    • 20. Section Intro: A Deeper Look At Vue

      0:39
    • 21. Adding a progress bar

      7:46
    • 22. Computed properties

      8:57
    • 23. Watchers

      3:50
    • 24. Key events & modifiers

      3:21
    • 25. Filters

      6:08
    • 26. More on looping: keys & index numbers

      5:27
    • 27. Using multiple Vue instances

      6:25
    • 28. Looping with objects

      6:56
    • 29. Adding our navigation links & keys

      6:16
    • 30. Accessing Vue instances externally

      4:32
    • 31. Vue instance properties & methods

      4:50
    • 32. Referencing elements with ref

      4:45
    • 33. Using string templates

      7:06
    • 34. The Vue lifecycle

      5:40
    • 35. Vue lifecycle hooks in action

      6:51
    • 36. Section Outro: A Deeper Look At Vue

      0:39
    • 37. Section intro: Build tools & Workflow

      0:37
    • 38. Installing Node & NPM

      4:08
    • 39. Scaffolding projects with the vue-cli

      8:06
    • 40. Exploring our project layout and build tools

      9:26
    • 41. Using the data object with single file templates

      7:49
    • 42. Section outro: Build tools & Workflow

      0:19
    • 43. Section intro: Introduction to Components

      0:41
    • 44. What are components?

      5:07
    • 45. Registering global components

      10:57
    • 46. Registering local components

      5:26
    • 47. Creating single file components

      8:37
    • 48. Adding the card front component

      9:07
    • 49. Emit data to parent components

      9:21
    • 50. Dynamic components

      2:49
    • 51. Creating the additional card components

      5:53
    • 52. Creating the text input component

      9:40
    • 53. Receiving data from the text input

      4:38
    • 54. Creating the text output component

      3:38
    • 55. Passing data with props

      5:37
    • 56. Keeping components alive

      2:26
    • 57. Scoping CSS styles

      7:40
    • 58. Prop validation

      5:01
    • 59. Passing prop data to a style object

      3:19
    • 60. Introduction to slots

      9:38
    • 61. Slot scope & fallback content

      4:57
    • 62. Named slots

      3:30
    • 63. Section outro: Introduction to Components

      0:42
    • 64. Section intro: Components Continued & Firebase Storage

      0:37
    • 65. Setting up Firebase

      6:55
    • 66. Creating the ImageUpload component

      6:40
    • 67. Uploading images to firebase

      9:44
    • 68. Image preview thumbnail

      4:11
    • 69. Upload progress bar & $emit file data

      8:54
    • 70. Image output component

      9:09
    • 71. Downloading images from Firebase

      6:15
    • 72. Set image button

      7:20
    • 73. Text options menu: font sizes

      8:00
    • 74. Text options menu: text alignment

      5:03
    • 75. Text options menu: font style & weight

      9:56
    • 76. Remove image button

      4:21
    • 77. Passing data with callbacks

      6:40
    • 78. Making images draggable

      5:48
    • 79. Finishing the CardInsideLeft component

      4:50
    • 80. Finishing the CardInsideRight component

      2:48
    • 81. Finishing the CardBack component

      3:39
    • 82. Introduction to the event bus

      7:26
    • 83. Sending events to the event bus

      6:51
    • 84. Receiving events from the event bus

      13:05
    • 85. Adding mixins

      6:51
    • 86. Section outro: Components Continued & Firebase Storage

      0:35
    • 87. Section intro: Transitions & Animations

      0:31
    • 88. Transition classes

      2:58
    • 89. Adding CSS transitions

      6:47
    • 90. Adding CSS animations

      5:58
    • 91. Component transitions & transition modes

      3:23
    • 92. Javascript hooks introduction

      2:03
    • 93. Javascript hooks in action

      8:51
    • 94. Mixing animations & transitions

      4:59
    • 95. Custom transition classes

      3:14
    • 96. Initial render transitions

      3:07
    • 97. Element transitions & keys

      4:45
    • 98. Group transitions

      5:43
    • 99. V-move class & dynamic transition names

      4:06
    • 100. Section outro: Transitions & Animations

      0:32
    • 101. Thank you

      1:06
    • 102. Follow me on Skillshare!

      0:23
17 students are watching this class
How students rated this class
Leave Review

Watch more to review

We ask our students to watch a few lessons before reviewing to make sure we get quality feedback!

Best Suited for
 --  Beginner Intermediate Advanced Beginner/Intermediate Intermediate/Advanced All Levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Be the first!

No ratings just yet—watch a few lessons to be the first to share whether this class met your expectations.

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Be the first to leave a review in our updated system!
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update. You are welcome to edit your old review into the new system!

24 of 24 students recommend this class