Vue.js 2 Academy: Learn Vue Step by Step

*** UPDATE!

Vue 3 has been released and this class has been replaced with a new one to cover this new version:

https://www.skillshare.com/classes/In-Depth-Vue-3-For-Beginners/1881663970

***

Take your HTML, CSS & Javascript skills to the next level by learning one of the hottest Javascript frameworks available today, Vue.js!

If you are unfamiliar with vue.js, or Javascript libraries and frameworks in general, some of the questions you may be asking is:

What is Vue.js?

And why should I learn it in the first place?

Vue.js is a really fun and easy to use Javascript framework for building user interfaces

The core of the framework is very lightweight and fast, and it can be used in projects of any size

From easily dropping it into an existing website or application to just control a part of it such as adding new components,

Right through to medium or large single page applications

Considering the lightweight size of the vue.js core, it is still packed full of features which you will learn about during this course.

During this course you will build 2 fun, exciting and challenging projects, to apply everything you will learn instantly.

We begin with a guest list app where users can add their name to an event guest list. This is a simple app but will guide you through all of the vue.js essentials such as:

• Two way data binding
• Event handling
• Templates and the Virtual DOM
• List & conditional rendering
• Binding attributes & styles
• The Vue instance 
• Javascript expressions
• Instance properties: Data, Computed, Watchers, Methods, Filters etc
• Looping & filters
• Refs and other instance properties and methods
• Vue lifecycly
• Plus much more!

You will then build on this knowledge, by building a greeting card application, where the user can create and edit their own custom greeting card. They can add their own text and images to create a personalised card.

This project introduces more concepts such as:

• Components (local, global and single file)
• The Vue CLI for scaffolding projects with build tools such as Webpack & Babel
• Installing Node & NPM
• Passing data with $emit 
• Storing & retrieving images from Firebase
• Props and prop validation
• Slots and slot scope
• Binding to menu options to change fonts & styles
• Event bus
• Mixins
• Plus much more!

So are you ready to learn one of the hottest and most upcoming Javascript frameworks available?

Join me now and I look forward to having you on board!

• Welcome!
• What is Vue.js and why should I use it?
• Visual studio installation
• Section Intro: Vue Basics
• 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 elements to attributes
• Binding styles
• Vue shorthand syntax
• Outputting text & HTML
• V-if vs v-show
• Using Javascript expressions
• Section Outro: Vue Basics
• Section Intro: A Deeper Look At Vue
• Adding a progress bar
• Computed properties
• Watchers
• Key events & 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: A Deeper Look At Vue
• Section intro: Build tools & Workflow
• Installing Node & NPM
• Scaffolding projects with the vue-cli
• Exploring our project layout and build tools
• Using the data object with single file templates
• Section outro: Build tools & Workflow
• Section intro: Introduction to Components
• 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: Introduction to Components
• Section intro: Components Continued & Firebase Storage
• Setting up Firebase
• Creating the ImageUpload 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: Components Continued & Firebase Storage
• Section intro: Transitions & Animations
• 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: Transitions & Animations
• Thank you
• Follow me on Skillshare!