Book Image

Vue.js 2 Academy: Learn Vue Step by Step [Video]

By : Chris Dixon
Book Image

Vue.js 2 Academy: Learn Vue Step by Step [Video]

By: Chris Dixon

Overview of this book

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. All the code files are placed at https://github.com/PacktPublishing/Vue.js-2-Academy-Learn-Vue-Step-by-Step
Table of Contents (8 chapters)
Free Chapter
1
Introduction & Getting Started
8
Thank You
Chapter 6
Components Continued & Firebase Storage: Creative Cards App
Content Locked
Section 8
Downloading images from Firebase
Well done for reaching this stage. We have covered a lot so far and I hope it makes sense. If you are still struggling to understand, don't worry too much. As you keep going with this course you will get lot's more chance to practice, and you have already covered most of the core concepts of vue.js. In this video, we are going to download and display the image to the card. Already, we are being passed the image name via the displayImage prop. We can set up a watch property to detect changes caused when the user uploads a new image. Inside of here we want to communicate with Firebase to download the image to display on the card.