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
19 students are watching this class

Project Description

During this course, we will build 2 applications.

We will begin by building a Guest List app, where users can register their interest in an event, and be added to the guest list.

The second will be a greeting card application where users can create their own personalised greeting card, using custom text and images. This will be a more complex app using components and Firebase storage.

So, by the end of the course, you will have the choice of 2 to share your favourite with your fellow classmates!

Student Projects

project card
Renzo Salvador
4 comments