Develop exciting projects including a guest list and greeting card application and gain hands-on experience with Vue.js
About This Video
Develop exciting projects including a guest list and greeting card application and gain hands-on experience with Vue.js
About This Video
In Detail
Vue.js is a fun and easy-to-use JavaScript framework for building user interfaces. From easily adding it to an existing website or application to just control a part of it, such as adding new components, through to using it for medium or large single-page applications, you can improve productivity in several ways.
The course will guide you through building two challenging yet exciting projects, which will help you apply everything you learn.
You’ll begin with a guest list app where users can add their name to an event guest list. Although this is a simple app, you’ll learn several Vue.js essentials while building it such as two-way data binding, event handling, templates and the Virtual DOM, and instance properties - data, computed, watchers, methods, and filters.
You will then build on your knowledge by creating a greeting card application where users can create and edit their custom greeting card. They will be able to add their text and images to create a personalised card. This project will get you up to speed with components (local, global, and single file), installing Node and NPM, passing data with $emit, and storing and retrieving images from Firebase. In addition to this, you’ll make use of Vue CLI to scaffold your projects with build tools such as Webpack and Babel.
By the end of this course, you will be well-versed with Vue.js and have gained hands-on experience in applying it effectively in your projects.
Chapter 1 : Introduction Getting Started
Welcome
What is Vue why should I learn it?
Visual Studio installation
Chapter 2 : 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
Chapter 3 : 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
Chapter 4 : 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
Chapter 5 : 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
Chapter 6 : 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
Chapter 7 : 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
Chapter 8 : Thank You
Thank you