Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Vue.js 2 Academy: Learn Vue Step by Step
Introduction & Getting Started
Welcome
Visual studio installation
What is vue.js and why should i learn it?
Vue Basics: Guest List App
Section intro
Download project starter
Installing Vue.js
The Vue Instance & the data object
Templates and the virtual DOM
Two way data binding with v-model
Event handling and methods
List rendering
Conditional rendering in Vue
Binding attributes to elements
Binding styles
Vue shorthand syntax
Outputting text and HTML
V-if vs v-show
Using javascript expressions
Section outro
A deeper look at Vue: Guest list app
Section intro
Adding a progress bar
Computed properties
Watchers
Key events and modifiers
Filters
More on looping: keys & index numbers
Using multiple Vue instances
Looping with objects
Adding our navigation links & keys
Accessing vue instances externally
Vue instance properties and methods
Referencing elements with ref
Using string templates
The Vue lifecycle
Vue lifecycle hooks in action
Section outro
Build Tools & Workflow: Creative Cards App
Section intro
Installing Node and NPM
Scaffolding projects with the vue cli
Exploring our project layout & build tools
Using the data object with single file templates
Section outro
Introduction to Components: Creative Cards App
What are components?
Registering global components
Registering local components
Creating single file components
Adding the card front component
Emit data to parent components
Dynamic components
Creating the additional card components
Creating the text input component
Receiving data from the text input
Creating the text output component
Passing data with props
Keeping components alive
Scoping CSS styles
Prop validation
Passing prop data to a style object
Introduction to slots
Slot scope and fallback content
Named slots
Components Continued & Firebase Storage: Creative Cards App
Setting up Firebase
Creating the image upload component
Uploading images to Firebase
Image preview thumbnail
Upload progress bar and $emit file data
Image output component
Downloading images from Firebase
Set image button
Text options menu-font sizes
Text options menu- text alignment
Text options menu- font style and weight
Remove image button
Passing data with callbacks
Making images draggable
Finishing the CardInsideLeft component
Finishing the CardInsideRight component
Finishing the CardBack component
Introduction to the event bus
Sending events to the event bus
Thank You
Thank you
Image output component
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock