This course is designed for those interested to learn the basics of Javascript Vue.js.
Read more.Instructor
Access all courses in our library for only $9/month with All Access Pass
Get Started with All Access PassBuy Only This CourseAbout This Course
Who this course is for:
- Developers
- Beginners
- Those who want to learn Vue
What you’ll learn:
- Build a fun and exciting project
- Learn how to make a guest list app
- Become familiar with creating a greeting card
Welcome to Vue.js 2 Academy: Learn Vue Step By Step!
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 lifecycle
- 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 personalized 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!
Our Promise to You
By the end of this course, you will have learned Javascript Vue.js.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Get started today and learn more about the basics of Javascript Vue.js.
Course Curriculum
| Section 1 - Introduction And Getting Started | |||
| Welcome | 00:00:00 | ||
| What Is Vue.js And Why Should I Learn It? | 00:00:00 | ||
| Visual Studio Installation | 00:00:00 | ||
| Section 2 - Vue Basics: Guest List App | |||
| Section Intro | 00:00:00 | ||
| Download Project Starter | 00:00:00 | ||
| Installing vue.js | 00:00:00 | ||
| The Vue Instance And The Data Object | 00:00:00 | ||
| Templates And The Virtual DOM | 00:00:00 | ||
| Two Way Data Binding With V-model | 00:00:00 | ||
| Event Handling And Methods | 00:00:00 | ||
| List Rendering | 00:00:00 | ||
| Conditional Rendering In Vue | 00:00:00 | ||
| Binding Attributes To Elements | 00:00:00 | ||
| Binding Styles | 00:00:00 | ||
| Vue Shorthand Syntax | 00:00:00 | ||
| Outputting Text And Html | 00:00:00 | ||
| V-if Vs V-show | 00:00:00 | ||
| Using Javascript Expressions | 00:00:00 | ||
| Section Outro | 00:00:00 | ||
| Section 3 - A Deeper Look At Vue: Guest List App | |||
| Section Intro | 00:00:00 | ||
| Adding The Progress Bar | 00:00:00 | ||
| Computed Properties | 00:00:00 | ||
| Watchers | 00:00:00 | ||
| Key Events And Modifiers | 00:00:00 | ||
| Filters | 00:00:00 | ||
| More On Looping: Keys And Index Numbers | 00:00:00 | ||
| Using Multiple Vue Instances | 00:00:00 | ||
| Looping With Objects | 00:00:00 | ||
| Adding Our Navigation Links And Keys | 00:00:00 | ||
| Accessing Vue Instances Externally | 00:00:00 | ||
| Vue Instance Properties And Methods | 00:00:00 | ||
| Referencing Elements With Ref | 00:00:00 | ||
| Using String Templates | 00:00:00 | ||
| The Vue Lifecycle | 00:00:00 | ||
| Vue Lifecycle Hooks In Action | 00:00:00 | ||
| Section Outro | 00:00:00 | ||
| Section 4 - Build Tools And Workflow: Creative Cards App | |||
| Section Intro | 00:00:00 | ||
| Installing Node And NPM | 00:00:00 | ||
| Scaffolding Projects With The Vue Cli | 00:00:00 | ||
| Exploring Our Project Layout And Build Tools | 00:00:00 | ||
| Using The Data Object With Single File Templates | 00:00:00 | ||
| Section Outro | 00:00:00 | ||
| Section 5 - Introduction To Components: Creative Cards App | |||
| What Are Components? | 00:00:00 | ||
| Registering Global Components | 00:00:00 | ||
| Registering Local Components | 00:00:00 | ||
| Creating Single File Components | 00:00:00 | ||
| Adding The Card Front Component | 00:00:00 | ||
| Emit Data To Parent Components | 00:00:00 | ||
| Dynamic Components | 00:00:00 | ||
| Creating The Additional Card Components | 00:00:00 | ||
| Creating The Text Input Component | 00:00:00 | ||
| Receiving Data From The Text Input | 00:00:00 | ||
| Creating The Text Output Component | 00:00:00 | ||
| Passing Data With Props | 00:00:00 | ||
| Keeping Components Alive | 00:00:00 | ||
| Scoping CSS Styles | 00:00:00 | ||
| Prop Validation | 00:00:00 | ||
| Passing Prop Data To A Style Object | 00:00:00 | ||
| Introduction To Slots | 00:00:00 | ||
| Slot Scope And Fallback Content | 00:00:00 | ||
| Named Slots | 00:00:00 | ||
| Section 6 - Components Continued And Firebase Storage: Creative Cards App | |||
| Setting Up Firebase | 00:00:00 | ||
| Creating The Image Upload Component | 00:00:00 | ||
| Uploading Images To Firebase | 00:00:00 | ||
| Image Preview Thumbnail | 00:00:00 | ||
| Upload Progress Bar And Semit File Data | 00:00:00 | ||
| Image Output Component | 00:00:00 | ||
| Downloading Images From Firebase | 00:00:00 | ||
| Set Image Button | 00:00:00 | ||
| Text Options Menu: Font Sizes | 00:00:00 | ||
| Text Options Menu: Text Alignment | 00:00:00 | ||
| Text Options Menu: Font Style And Weight | 00:00:00 | ||
| Remove Image Button | 00:00:00 | ||
| Passing Data With Callbacks | 00:00:00 | ||
| Making Images Draggable | 00:00:00 | ||
| Finishing The Cardinsideleft Component | 00:00:00 | ||
| Finishing The Cardinsideright Component | 00:00:00 | ||
| Finishing The Cardback Component | 00:00:00 | ||
| Introduction To The Event Bus | 00:00:00 | ||
| Sending Events To The Event Bus | 00:00:00 | ||
| Receiving Events From The Event Bus | 00:00:00 | ||
| Adding Mixins | 00:00:00 | ||
| Section 7 - Thank You | |||
| Thank You | 00:00:00 | ||
Related Courses
Are you interested in higher education?