Introduction & Getting Started
Vue Basics: Guest List App
-
Section intro (0:30)
-
Download project starter (2:32)
-
Installing vue.js (3:05)
-
The Vue Instance & the data object (7:28)
-
Templates & the virtual DOM (3:31)
-
Two way data binding with v-model (3:08)
-
Event handling & methods (5:46)
-
List rendering (2:54)
-
Conditional rendering in vue (5:19)
-
Binding attributes to elements (4:11)
-
Binding styles (4:48)
-
Vue shorthand syntax (2:42)
-
Outputting text and HTML (6:25)
-
V-if vs v-show (3:10)
-
Using Javascript expressions (4:23)
-
Section outro (0:32)
A deeper look at Vue: Guest list app
-
Section intro (0:39)
-
Adding the progress bar (7:46)
-
Computed properties (8:58)
-
Watchers (3:50)
-
Key events and modifiers (3:21)
-
Filters (6:08)
-
More on looping: keys & index numbers (5:27)
-
Using multiple Vue instances (6:25)
-
Looping with objects (6:56)
-
Adding our navigation links & keys (6:16)
-
Accessing vue instances externally (4:32)
-
Vue instance properties & methods (4:50)
-
Referencing elements with ref (4:45)
-
Using string templates (7:06)
-
The vue lifecycle (5:40)
-
Vue lifecycle hooks in action (6:51)
-
Section outro (0:39)
Build Tools & Workflow: Creative Cards App
Introduction to Components: Creative Cards App
-
What are components? (5:07)
-
Registering global components (10:57)
-
Registering local components (5:26)
-
Creating single file components (8:37)
-
Adding the card front component (9:07)
-
Emit data to parent components (9:21)
-
Dynamic components (2:49)
-
Creating the additional card components (5:53)
-
Creating the text input component (9:40)
-
Receiving data from the text input (4:38)
-
Creating the text output component (3:38)
-
Passing data with props (5:37)
-
Keeping components alive (2:26)
-
Scoping CSS styles (7:40)
-
Prop validation (5:01)
-
Passing prop data to a style object (3:19)
-
Introduction to slots (9:38)
-
Slot scope and fallback content (4:57)
-
Named slots (3:30)
Components Continued & Firebase Storage: Creative Cards App
-
Setting up Firebase (6:55)
-
Creating the image upload component (6:40)
-
Uploading images to Firebase (9:44)
-
Image preview thumbnail (4:11)
-
Upload progress bar & $emit file data (8:54)
-
Image output component (9:09)
-
Downloding images from Firebase (6:15)
-
Set image button (7:20)
-
Text options menu: font sizes (8:00)
-
Text options menu: text alignment (5:03)
-
Text options menu- font style and weight (9:57)
-
Remove image button (4:21)
-
Passing data with callbacks (6:40)
-
Making images draggable (5:48)
-
Finishing the CardInsideLeft component (4:50)
-
Finishing the CardInsideRight component (2:48)
-
Finishing the CardBack component (3:39)
-
Introduction to the event bus (7:26)
-
Sending events to the event bus (6:51)
-
Receiving events from the event bus (13:05)
-
Adding mixins (6:51)
Thank You
