Vue.js 2 Academy: Learn Vue Step by Step
Learn vue.js in a practical, project based approach. Also covers using the Vue-CLI & Firebase storage
Watch Promo
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!
Your Instructor
Hello, My name is Chris and I am a web developer and online teacher. I am passionate about what I do and about teaching others. I have started various online and offline businesses.
Whatever your reason for learning to build websites you have made an excellent career choice.
My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and i have watched the web evolve into what it is today.
I try to make my courses enjoyable and try to remember what it was like when I was learning. I also believe the best way to learn is by doing and try to include as many practical examples as possible in my courses.
Thanks for taking an interest and I look forward to you joining me.
Chris
Course Curriculum
-
StartSection intro (0:30)
-
StartDownload project starter (2:32)
-
StartInstalling vue.js (3:05)
-
StartThe Vue Instance & the data object (7:28)
-
StartTemplates & the virtual DOM (3:31)
-
StartTwo way data binding with v-model (3:08)
-
StartEvent handling & methods (5:46)
-
StartList rendering (2:54)
-
StartConditional rendering in vue (5:19)
-
StartBinding attributes to elements (4:11)
-
StartBinding styles (4:48)
-
StartVue shorthand syntax (2:42)
-
StartOutputting text and HTML (6:25)
-
StartV-if vs v-show (3:10)
-
StartUsing Javascript expressions (4:23)
-
StartSection outro (0:32)
-
StartSection intro (0:39)
-
StartAdding the progress bar (7:46)
-
StartComputed properties (8:58)
-
StartWatchers (3:50)
-
StartKey events and modifiers (3:21)
-
StartFilters (6:08)
-
StartMore on looping: keys & index numbers (5:27)
-
StartUsing multiple Vue instances (6:25)
-
StartLooping with objects (6:56)
-
StartAdding our navigation links & keys (6:16)
-
StartAccessing vue instances externally (4:32)
-
StartVue instance properties & methods (4:50)
-
StartReferencing elements with ref (4:45)
-
StartUsing string templates (7:06)
-
StartThe vue lifecycle (5:40)
-
StartVue lifecycle hooks in action (6:51)
-
StartSection outro (0:39)