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
Vue.js 2 Academy: Learn Vue Step by Step
Introduction & Getting Started
Welcome (2:45)
What is Vue.js and why should i learn it? (2:16)
Visual studio installation (1:51)
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
Section intro (0:37)
Installing Node and NPM (4:08)
Scaffolding projects with the vue cli (8:06)
Exploring our project layout & build tools (9:26)
Using the data object with single file templates (7:49)
Section outro (0:19)
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
Thank you (1:33)
Keep on learning
Event handling & methods
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
