Categories

There are currently no items in your shopping cart.

User Panel

Forgot your password?.

Vue.js 2 Academy: Learn Vue Step by Step

Video Introducing this tutorial


Introduction & Getting Started :
Welcome
What is Vue & why should I learn it?
Visual Studio installation

Vue Basics: Guest List App :
Section intro
Download project starter
Installing Vue.js
The Vue instance & the data object
Templates & the virtual DOM
Two-way data binding with v-model
Event handling & methods
List rendering
Conditional rendering in Vue
Binding attributes to elements
Binding styles
Vue shorthand syntax
Outputting text & 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 & 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 & 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 :
Section intro
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 & fallback content
Named slots
Section outro

Components Continued & Firebase Storage: Creative Cards App :
Section intro
Setting up Firebase
Creating the Image Upload component
Uploading images to Firebase
Image preview thumbnail
Upload progress bar & $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 & 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
Receiving events from the event bus
Adding mixins
Section outro

Transitions & Animations :
Section intro
Transition classes
Adding CSS transitions
Adding CSS animations
Component transitions & transition modes
JavaScript hooks introduction
JavaScript hooks in action
Mixing animations & transitions
Custom transition classes
Initial render transitions
Element transitions & keys
Group transitions
V-move class & dynamic transition names
Section outro

Thank You :
Thank you