Vue.js 2 Academy: Learn Vue Step by Step

Video Description

Develop exciting projects including a guest list and greeting card application and gain hands-on experience with Vue.js

About This Video

  • Learn Vue.js by building real-world projects
  • Discover how to use additional tools and modules to enhance your project
  • Explore the list and conditional rendering
  • Get to grips with binding attributes and styles
  • Understand the Vue instance
  • Delve into JavaScript expressions
  • Gain insights into looping and filters
  • Become well-versed with refs and other instance properties and methods
  • Explore the Vue lifecycle

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.

Publisher Resources

Download Example Code

Table of Contents

  1. Chapter 1 : Introduction & Getting Started
    1. Welcome 00:02:29
    2. What is Vue & why should I learn it? 00:02:05
    3. Visual Studio installation 00:01:51
  2. Chapter 2 : Vue Basics: Guest List App
    1. Section intro 00:00:30
    2. Download project starter 00:02:33
    3. Installing Vue.js 00:03:03
    4. The Vue instance & the data object 00:07:29
    5. Templates & the virtual DOM 00:03:32
    6. Two-way data binding with v-model 00:03:08
    7. Event handling & methods 00:05:46
    8. List rendering 00:02:55
    9. Conditional rendering in Vue 00:05:20
    10. Binding attributes to elements 00:04:11
    11. Binding styles 00:04:48
    12. Vue shorthand syntax 00:02:42
    13. Outputting text & HTML 00:06:26
    14. V-if vs v-show 00:03:11
    15. Using JavaScript expressions 00:04:23
    16. Section outro 00:00:32
  3. Chapter 3 : A deeper look at Vue: Guest list app
    1. Section intro 00:00:40
    2. Adding a progress bar 00:07:46
    3. Computed properties 00:08:58
    4. Watchers 00:03:50
    5. Key events and modifiers 00:03:21
    6. Filters 00:06:08
    7. More on looping: keys & index numbers 00:05:28
    8. Using multiple Vue instances 00:06:25
    9. Looping with objects 00:06:57
    10. Adding our navigation links & keys 00:06:16
    11. Accessing Vue instances externally 00:04:32
    12. Vue instance properties & methods 00:04:50
    13. Referencing elements with ref 00:04:45
    14. Using string templates 00:07:07
    15. The Vue lifecycle 00:05:41
    16. Vue lifecycle hooks in action 00:06:49
    17. Section outro 00:00:39
  4. Chapter 4 : Build Tools & Workflow: Creative Cards App
    1. Section intro 00:00:37
    2. Installing Node & NPM 00:04:08
    3. Scaffolding projects with the Vue-cli 00:08:06
    4. Exploring our project layout & build tools 00:09:26
    5. Using the data object with single file templates 00:07:50
    6. Section outro 00:00:20
  5. Chapter 5 : Introduction to Components: Creative Cards App
    1. Section intro 00:00:42
    2. What are components? 00:05:07
    3. Registering global components 00:10:58
    4. Registering local components 00:05:26
    5. Creating single file components 00:08:37
    6. Adding the card front component 00:09:08
    7. Emit data to parent components 00:09:22
    8. Dynamic components 00:02:50
    9. Creating the additional card components 00:05:53
    10. Creating the text input component 00:09:41
    11. Receiving data from the text input 00:04:38
    12. Creating the text output component 00:03:38
    13. Passing data with props 00:05:38
    14. Keeping components alive 00:02:27
    15. Scoping CSS styles 00:07:40
    16. Prop validation 00:05:02
    17. Passing prop data to a style object 00:03:20
    18. Introduction to slots 00:09:38
    19. Slot scope & fallback content 00:04:57
    20. Named slots 00:03:30
    21. Section outro 00:00:42
  6. Chapter 6 : Components Continued & Firebase Storage: Creative Cards App
    1. Section intro 00:00:38
    2. Setting up Firebase 00:06:56
    3. Creating the Image Upload component 00:06:41
    4. Uploading images to Firebase 00:09:44
    5. Image preview thumbnail 00:04:12
    6. Upload progress bar & $emit file data 00:08:55
    7. Image Output component 00:09:09
    8. Downloading images from Firebase 00:06:15
    9. Set image button 00:07:20
    10. Text options menu: font sizes 00:08:00
    11. Text options menu: text alignment 00:05:04
    12. Text options menu: font style & weight 00:09:57
    13. Remove image button 00:04:21
    14. Passing data with callbacks 00:06:41
    15. Making images draggable 00:05:48
    16. Finishing the CardInsideLeft component 00:04:50
    17. Finishing the CardInsideRight component 00:02:49
    18. Finishing the CardBack component 00:03:39
    19. Introduction to the event bus 00:07:27
    20. Sending events to the event bus 00:06:51
    21. Receiving events from the event bus 00:13:05
    22. Adding mixins 00:06:52
    23. Section outro 00:00:36
  7. Chapter 7 : Transitions & Animations
    1. Section intro 00:00:31
    2. Transition classes 00:02:58
    3. Adding CSS transitions 00:06:47
    4. Adding CSS animations 00:05:58
    5. Component transitions & transition modes 00:03:24
    6. JavaScript hooks introduction 00:02:04
    7. JavaScript hooks in action 00:08:52
    8. Mixing animations & transitions 00:05:00
    9. Custom transition classes 00:03:14
    10. Initial render transitions 00:03:07
    11. Element transitions & keys 00:04:46
    12. Group transitions 00:05:43
    13. V-move class & dynamic transition names 00:04:07
    14. Section outro 00:00:32
  8. Chapter 8 : Thank You
    1. Thank you 00:01:06

Product Information

  • Title: Vue.js 2 Academy: Learn Vue Step by Step
  • Author(s): Chris Dixon
  • Release date: October 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781838985455