Vue.js 2 Academy: Learn Vue Step by Step

1. Welcome

Welcome to the Vue.js academy course! Let's begin!

2. What is Vue & why should I learn it?

Let's take a moment to look at exactly what Vue.js is, and how using it can benefit us.

3. Visual Studio installation

This video covers popular text editors and web browsers required for the course. We also look at Visual Studio Code, which we will be using, along with a plugin to allow Vue JS 2 snippets and syntax highlighting.

1. Section intro

Welcome to this new section and Vue.js project!

2. Download project starter

Using a started HTML project will allow us to dive straight into looking at when Vue.js can offer us!

3. Installing Vue.js

Installing Vue.js is simple. Here we look at 4 different ways we can include it in our projects. To begin we add the CDN version to keep things simple.

4. The Vue instance & the data object

Now we have Vue installed, we now take a first look at the Vue instance. This is the heart of our Vue.js applications and controls all of the data in our app. We look at how the Vue instance is set up and also begin working with el and the data object.

5. Templates & the virtual DOM

This video takes a step back from the code we have been looking at to discuss what is going on behind the scenes. We look at why the code we write in our templates is different to whet Vue.js renders to the DOM. We also discuss the virtual DOM and how Vue uses this to render more optimally.

6. Two-way data binding with v-model

Vue.js provides us with v-model to enable 2-way data binding. This set up allows us to have a 2 way data flow between our data property and the user interface.

7. Event handling & methods

This video looks at how we can use in Vue to trigger a method when a form is submitted. We also take a first look at how Vue implements event modifiers such as preventDefault().

8. List rendering

We now move on to look at how Vue.js renders lists using v-for loops. We loop through the guestName array and display them to the screen.

9. Conditional rendering in Vue

Conditional rendering will render content depending on the circumstances, similar to using Javascript if/else statements. This video looks at how Vue.js handles these conditions by adding or removing text depending on if there are any names on the guest list.

10. Binding attributes to elements

This video takes a look at how to use the v-bind directive in Vue.js. V-bind, is used to add dynamic data to HTML attributes. We use this Vue directive to change the background colour to green once the form is submitted.

11. Binding styles

Binding styles is a great way to add CSS into our application. We take a look at adding dynamic styling inline, then move on to adding a style object as a Vue data property.

12. Vue shorthand syntax

This video shows some of the shorthand syntax you can use with Vue.js, specifically for v-bind and v-on.

13. Outputting text & HTML

We now cover some new directives which can be used as an alternative to text interpolation. First, we cover v-text which is used to update the elements text content. Then we move on to v-html which is used to update the elements innerHTML. Finally, we look at v-once which only renders data once. This means any updates from the Vue instance will not cause an update in the app.

14. V-if vs v-show

V-show is an alternative way to display content depending on a condition. This video will discuss the pros and cons with using both v-if and v-show to render content.

15. Using JavaScript expressions

Vue.js not only allows us to output reactive data using the interpolation syntax (double curly braces), but we can also use the full power of Javascript. Vue and Javascript can be used independently or we can even combine the data to achieve almost any result we want!

16. Section outro

Congratulations for getting to the end of this section, hopefully by now you will be getting more comfortable with Vue.js.

1. Section intro

Welcome to this new section where we will begin to take a deeper look into what Vue.js has to offer.

2. Adding a progress bar

We continue with our Guest List app in this section by adding a progress bar. This progress bar is increased each time we add a new name to the guest list. This gives us more practice adding dynamic Vue.js data and also binding styles. We also add an event capacity and restrict the number of names to be added. This gives us chance to add to our Vue methods and also use Javascript to work out how full the event is, in a percentage.

3. Computed properties

Computed properties are a great way to add operations to your Vue.js apps. We can remove code from inside of our templates and add it to a computed property. This also allows our code to be re-usable. Computed properties are also aware of any data properties inside of them and will observe them, updating the view when necessary. Here you will learn the key differences between computed properties and methods and learn when to use each.

4. Watchers

Using a watch property is an alternative way to computed properties. Watchers observe a data property and will re-render if any data changes. Watchers can be useful as, unlike computed properties, they can be used to perform asynchronous tasks.

5. Key events and modifiers

This video covers how we can use the v-on directive to trigger events. We have access to the full range of HTML events such as keyup and keydown. Also covered is how Vue.js provides us with modifier aliases, which are useful to avoid the need to remember keyboard key codes.

6. Filters

This video looks at how to use single or multiple filters to format the entered names. We also discuss when it is best to use a filter or a computed property.

7. More on looping: keys & index numbers

Index numbers are important to have access to when rendering lists using loops. Index numbers allow us to access the number of each item stored. This number can easily be accessed by adding a second argument to the v-for loop. We also look at how to dynamically bind a unique key to each item in the loop, this allows Vue.js to better track each item and allows for more accurate updating.

8. Using multiple Vue instances

In this video we add a second Vue instance, to control a single section. This is an ideal way to split our code up into sections and control related data. There are some drawbacks though, such as communicating with data from other instances is more difficult.

9. Looping with objects

You will learn how to use this with the HTML tag to render to the screen. We will also discover additional arguments Vue.js allows us to pass to the for loop, the key and index number.

10. Adding our navigation links & keys

Now we know how to loop through an array of objects using Vue.js, we use this knowledge to now tailor the navigation to our app. We add a URL to the object and use this to add links to our navigation. Earlier in the course we looked at adding keys to loops, here we put this again into practice by using our unique key reference.

11. Accessing Vue instances externally

When using multiple Vue instances, we cannot reference data from other instances using the "this" keyword. There are however some other ways which we will look at. We can use JavaScript to access data properties externally. Or we also look at how to do this from inside of a Vue instances method call.

12. Vue instance properties & methods

So far, we have added our own data properties and methods to the Vue instance. Along with these, Vue.js also provides us with some native properties and methods which we have access to. This video takes a look at what we can access inside of our Vue instance, and also looks at getters and setters before and after creation.

13. Referencing elements with ref

In the last video we looked at some properties and methods which are available to us in the Vue instance. One of them is "ref", this allows to to add a reference to an element. We can then use this ref to access or set the elements data.

14. Using string templates

So far, we have linked our Vue instances to a HTML element using the 'el' property. There is also an alternative way, which is to create a string template inside of the Vue instance. We can then mount it using a Vue instance method called $mount. Also, we take a look at some of the limitations to using this method.

15. The Vue lifecycle

Vue.js provides us with lifecycle hooks to run some code during various phases of the Vue lifecycle. Here we take a look at the stages of the Vue lifecycle, and also when each lifecycle hook is running.

16. Vue lifecycle hooks in action

In the last video we looked at the Vue lifecycle hooks and at which stages they are called. Now we put them into practice in our app and trigger each one.

17. Section outro

I hope you have enjoyed this section and your first Vue project. By now you should be getting more comfortable with Vue.js and what it can do.

1. Section intro

Welcome to a new section. I hope you have enjoyed your first vue.js project and are looking forward to starting your next one.

2. Installing Node & NPM

We will be creating this next project using the Vue CLI. We will look at this in more detail in the next video. This video walks through the steps required to install Node.js and NPM which is required for the Vue CLI. As we progress in the course, we will also use this Node Package Manager (NPM) to install Vue.js and various other packages to use in our projects.

3. Scaffolding projects with the Vue-cli

In this video we are going to be using a tool called the Vue CLI to scaffold our projects. CLI stands for Command Line Interface and it allows us to create a new project with most of the common set up taken care of for us.

4. Exploring our project layout & build tools

Now we have the Vue-cli project set up, let's take a better look at our project structure. Here we look at all the files and folders which we have, along with the build tools we have such as Babel, for compiling our code, and Webpack to bundle our modules.

5. Using the data object with single file templates

When working with components, the data property inside of the Vue instance is different to our last project. This is because the components can be re-usable, but we still want them to manage their own data or 'state' individually. This video covers the differences in the data property and the syntax we now need to use.

6. Section outro

Congratulations, you have reached the end of this section. This has been a short, but important section.

1. Section intro

Let's investigate the topics covered in this section.

2. What are components?

Components are a really big part of building larger vue.js applications. They allow us to break up our code into smaller maintainable pieces. This video takes a deeper look into using components, and looks at how they will work in our next project.

3. Registering global components

Now we have a better understanding of what components are, and how we are going to break up our app into components, let's get to work on creating them. Vue.js provides us with different ways of creating components, here we look at registering components globally. This means we can create them once, and then re-use them anywhere in our app.

4. Registering local components

Now we have looked at global components, now we are going to look at how we can register a local component which is only available in the scope of other instances or components.

5. Creating single file components

The third and final type of component we will be looking at is single file components. Single file components are like the app.vue file which we have been working with. They contain 3 main sections. They have a template section where we can create the markup to display, a script section to handle and vue.js data and JavaScript, and finally, a style section for CSS. These self-contained components are also re-usable and we will be using this type of component for the rest of the course.

6. Adding the card front component

Now we are going to take a look at passing data between components, more specifically data from a child to a parent component. Vue.js handles this by using custom events to pass data to the parent. The parent component then listens for this event and can receive the data passed to it.

7. Emit data to parent components

In this application, we want to create components to display the different sides of our greeting card We also want to switch between these components when the user clicks on the menu links using dynamic components allows us to achieve this effect. We can switch between multiple components and place them in the same mounting point and all we need to do is use the reserved component element.

8. Dynamic components

In this application, we want to create components to display the different sides of our greeting card. We also want to switch between these components when the user clicks on the menu links. Using dynamic components allows us to achieve this effect. We can switch between multiple components and place them in the same mounting point. All we need to do is use the reserved component element.

9. Creating the additional card components

We already have the cardFront component, but we still need to create the cardInsideLeft, cardInsideRight and the cardBack vue files. We will be using these as containers for the text and image components later. Also, we will switch these components to change views.

10. Creating the text input component

Now it's time to create the text input components. These components will be our first reusable vue components, so we can create them once, and use them multiple times in the app as you can see here.

11. Receiving data from the text input

In the last video we successfully created and registered our new text input component. Now we are going to continue by adding this component to the front of the card 2 more times.

12. Creating the text output component

Now we have the input component receiving data from the user, now we are going to create the TextOutput file, this is going to be the component which displays the text on the card.

13. Passing data with props

Props are custom attributes for passing data to child components.

14. Keeping components alive

Vue.js provides us with a simple solution to this which is the keep-alive element.

15. Scoping CSS styles

This video looks at how scope can affect CSS. We look at how CSS will be applied across all components, and how we change this to restrict the styling to just one section.

16. Prop validation

When passing data to child components via props, sometimes we want a way of making sure we are sending the correct type of data to be use

17. Passing prop data to a style object

Our app is now being passed a validated prop which is a number, we can use this number to set from outside, the height we want to text box on the card to be

18. Introduction to slots

We now know how to pass data from the parent to the child component using props. We can also pass data to the child component using a method called slots. Slots are used for what is called content distribution. Often, we need to mix the parent and child components content together, and slots allow us to do this in a controlled way.

19. Slot scope & fallback content

First we look at adding fallback data, for if there is no content to insert. Then we will take a look at scope. Here we look as if the scope of the content is within the parent or child component.

20. Named slots

So far, we have only used a single slot element. This single slot as it is, will be used to receive the entire content section which we want to pass in. Rather than just using a single slot to accept the full content, we can use one or more slot elements, with a special name attribute, to only distribute sections of the content.

21. Section outro

You have learned all about the different types of components, passing data between components, props and slots to name a few.

1. Section intro

We are now going to be stepping things up by taking a deeper look at components, and dive into Firebase to store the user uploaded images. The app will also be completed by the end of this section, including all the components and finishing touches, such as making the images draggable, and editing the text.

2. Setting up Firebase

This project will take advantage of using Firebase's storage feature. Firebase is also great for adding databases and authentication to our app. Firebase works with any framework including Vue.js projects. In this video we will set up our Firebase project and add our config settings to our project.

3. Creating the Image Upload component

Hopefully now you should have Firebase initialized in your app with no console errors. If you do, then you are ready to create the ImageUpload component. This component, will be responsible for doing a few things:

4. Uploading images to Firebase

We have now set up the component button which allows the user to select a file from their system. We also need to push this image to Firebase for storage. This functionality can be added to a method, which is called when the file input is triggered, we can detect this with the on-change event handler. We look at the Firebase ref() and put() methods to allow us to send this selected image to Firebase storage.

5. Image preview thumbnail

We are making good progress with our Greeting Card app, the next step I want to take is to take the image file data which we now receive, stored in the file data property, and display an image preview on the screen. To do this, we are going to take advantage of the Javascript FileReader object. We will use FileReader, to read the contents of the image file we provide it. We then pass the result of the event to our tag as a src attribute.

6. Upload progress bar & $emit file data

We can now select an image from the user's computer and successfully upload to Firebase. Also, we have a small image preview under the file uploader. We are going to do 2 things in this video:

7. Image Output component

We now have all we need to enable us to create the ImageOutput component to display the image on the card. So now let's create the image output component to display the image. This component will receive the prop with the image name from the parent component, then in the next video we will use this name to download the correct image from Firebase.

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.

9. Set image button

We have added a "Set Image" button in the HTML but we have not wired it up to do anything yet. The purpose of this button is to do 2 things: First, it allows the user to confirm they want to use the image from the thumbnail. Also, as we mentioned in the last video, we are trying to download an image before it has the time to upload to the server. This button can also solve this problem if we use the button to $emit the file name. We can hide the button and only make it visible when the progress bar is at 100%.

10. Text options menu: font sizes

We are going to return to out text output component now and add an options menu. The menu will appear when the user hovers over the text with the mouse to allow us to change font size, text alignment, and even add bold or italic options. In this video, I am going to begin by setting up the menu to appear on hover and add font size options.

11. Text options menu: text alignment

Our menu is now appearing when we hover over the text and we also have successfully added a select input to change the font size. Now we can continue with the menu and add some more options, specifically 3 buttons to set the text alignment. It will follow a similar process to the select box but this time we will use radio buttons.

12. Text options menu: font style & weight

Now it is time to finish off our hover menu by adding options to change the text to be bold and italic. We can't use a radio button like the last video, because we want to be able to select both bold and italic at the same time, radio buttons only allow one to be selected. This can be achieved using checkboxes instead.

13. Remove image button

In the next few videos I am going to add some extra functionality to finish off our image component. To begin, I want to add a button which appears when the user hovers over the image, to allow the image to be removed. Once removed this will set a default placeholder image onto the card.

14. Passing data with callbacks

We have already looked at parent child component communication. We know a parent passed data to a child using props, and also a child passes data to the parent with custom event. There is an alternative too, which I want to make you aware of and this is using callback functions

15. Making images draggable

All the image functionality is nearly in place now. One of the problems we have mentioned is if we upload an image which is larger or smaller than the card container, it doesn't look too great. We can add jQuery into our app to easily make our image draggable by the user. If you are not familiar with jQuery, it as a JavaScript library which allows us to easily add features such as DOM manipulation, animations and event handling to name a few.

16. Finishing the CardInsideLeft component

The card front section we have been working on so far is now completed. We can now re-use the text and image components to put together the different sides of the card, beginning with the inside left. The inside left is a simple section which has a text input and a full height text output so the user can add a block of text.

17. Finishing the CardInsideRight component

Now we are going to move onto the inside right of the card. Again, this should be pretty straight forward as we have already done most of the work. We just need to add 3 text input and output component to make this up like we see here. So, it is pretty much a repeat of the inside left, but we need 3 components and 3 data properties too.

18. Finishing the CardBack component

We are now getting toward the end of the project so well done for getting this far. The back is the last side of the card we need to finish, and it will look like this. Again, it should be simple because we have already completed the components which make this up. We need to add the image upload and output, then just a simple copyright logo to finish things off. This would be a good chance to give this a go yourself by adding the image upload and output components, just remember this one need a callback method too to clear the image just like we used in the card front component.

19. Introduction to the event bus

When looking at components in this last few sections, we have looked at how parent-child components can communicate. We know we pass data from the child to the parent with custom events. Also, we know we pass data back from the parent to the child using props. This works well if the components which are to communicate are only 1 level apart like so far in the app. For example, the text input and output components are direct children of card front. This makes communication easy to achieve. However, there are often circumstances where components are nested 2 or more levels apart and need to communicate. This is common as our app grows. For this vue js provides a solution called the event bus.

20. Sending events to the event bus

We now have a Section Completed component and the event bus set up. In this video, we are going to import the event bus into this component file, then $emit a custom event back to the event bus.

21. Receiving events from the event bus

We have now sent data to the central event bus using $emit to send custom events. Now we will be creating the final component of this project which will be the progress section inside of the header. This component will also use the event bus, but this time to listen for the event and use the data from it.

22. Adding mixins

As our app grows bigger there may sometimes be situations where components will need to re-use the same code. Usually, it is not good practice to repeat the same code more than once. Inside of our app, if we look inside of the CardFront and CardBack components, we do repeat some code such as the clearImage method. To help with this, vue.js provides us with mixins. Mixins are an easy way to take any of the functionality from our components, this includes anything such as our data, methods and computed properties, and place in their own separate file. This file can then be imported into each component which needs access to it.

23. Section outro

Congratulations on getting to the end of this section and the project. You should now be comfortable using vue.js and creating projects using it! I would encourage you to keep going and continue to build some more projects of your own, feel free to share them with me too!

1. Section intro

This section is all about adding transitions and animations. This is a great way to make your apps look a lot more polished and really improve the user experience.

2. Transition classes

When working with enter-leave transitions, there are 6 classes which are applied during various stages of the transition. We have 3 for the enter phase which deals with the starting, ending and the active phase. The same also applies for the leaving phase where we also have access to the starting, leaving and active classes.

3. Adding CSS transitions

Now we have a basic understanding of the transition classes, I am now going to head back to the Creative Cards application to put this into practice. Here, we look at the wrapper element, provided by Vue. We also look at adding custom transition names too.

4. Adding CSS animations

Along with transitions we also have the option to add animations too. Animations allow us to gradually change from one style to another. We could gradually change an element from one color to another. Or for this example, I am going to add a scale effect to the "remove image" button. This means the button will begin small and grow to be full size when the mouse hovers. Then when the mouse leaves the button will shrink out of view. For the animation, we need to setup the @keyframes rule. We need to set up keyframes to control the steps of the CSS animation.

5. Component transitions & transition modes

We are not limited to adding transitions and animations to just elements, we can even transition between components when we click on the menu links It starts with the familiar wrapper which we can still use with the tags. Vue,js also provides us with transition modes too, to declare if we want the components to be removed before the new one enters, or the other way around.

6. JavaScript hooks introduction

During this section, we have used CSS to create animations and transitions in our app. Vue.js also provides us with JavaScript hooks which we can use during certain phases of the transition. If you remember from earlier in the course, we looked at how we could use hooks during various lifecycle stages, well transition hooks work like this too. By using these hooks, we have access to all the features which JavaScript offers us, not limited to just applying CSS.

7. JavaScript hooks in action

We will also cover when and why we should tell vue.js if we are using both CSS and JavaScript together during transitions.

8. Mixing animations & transitions

We have looked at using both transitions and animations independently so far. Both of these can also be mixed to work together too. We will do this in this video, by mixing both together and also look at how we can set they transition type, to declare which takes priority.

9. Custom transition classes

So far when using transitions, we have used the classes provided to us by vue.js such as v-enter and v-leave. This is ideal for a lot of cases but there may be times we want to use our own custom CSS classes. These situations can arise, particularly when using third party libraries for animating. Animation libraries, such as animate.css work by including the library as a CSS file, or by using CDN link to the library. Then to access the animations, we use custom class names for each animation, such as class=" bounce" for example. We can't add this custom class name using the hooks provided, however, vue.js provides to us custom classes to replace each transition class.

10. Initial render transitions

When our app loads for the first time, the card appears in with no styling. When we switch between components, we have added a fade effect. It would be nice if we could also fade the card in when the app loads up too. To do this vue.js provides us with the appear attribute. We can simply add this attribute inside of the element. Also, we take a look at how to override the default transition by adding our own custom class names for appear.

11. Element transitions & keys

The transitions we have looked at so far have only involved a single element. For example, the "remove image" transition was a single button element. Also, the text options we faded in and out, although this had many elements nested, there was a form as the main outer element. We can also transition between 2 separate elements too, common need for this is when used with v-if and v-else.

12. Group transitions

In the last video, we mentioned adding transitions to a list, such as how we do here with the v-for loop, work a little differently. For this case, Vue provides us with the element. We also look at how this element automatically adds a element, and also how we can change this if required.

13. V-move class & dynamic transition names

If you remember from earlier in the course when we created the guest list app, we set it up, so the names added are arranged alphabetically. When we add in a new name, the rest of the names jump out of place to allow the new name to be inserted. Rather than these names jumping, this moving of the elements can also be animated using the v-move class.

14. Section outro

Congratulations on getting to the end of this section.

1. Thank you

Thanks for taking the Vue.js Academy course. I hope you have enjoyed this course and gained a lot from it!