Vue.js 2 Academy: Learn Vue Step by Step
- 8.5 hours on-demand video
- 1 article
- 3 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Understand the Vue framework
- Add vue js to existing web sites or apps
- Build complex, scalable single page applications
Welcome to the Vue.js academy course!
This course is designed to take you from a vue.js beginner, to competent vue.js developer.
This will be achieved in a practical, project based approach where you will learn by building real examples and projects.
To get started with this course and Vue.js, we only need a few things.
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.
You will find the starter project for this section attached to this video.
I am going to place my folder on the desktop for easy access but it can be added anywhere you want to.
Using a started HTML project will allow us to dive straight into looking at when Vue.js can offer us!
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.
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.
This video looks at how we can use onsubmit 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().
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.
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.
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.
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.
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.
We can also use as many Vue instances as we link in our apps.
So far, we have only used one to control the whole of our app.
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.
We already know how to loop through arrays, we looked at this earlier in the course.
Now we will take a look at how we can loop through arrays of objects.
You will learn how to use this with the HTML <template> 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.
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.
When using multiple vue instances, we can not reference data from other instances using the "this" keyword.
There are however some other ways which we will look at.
Or we also look at how to do this from inside of a vue instances method call.
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.
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.
Welcome to a new section. I hope you have enjoyed your first vue.js project and are looking forward to starting your next one.
We will begin by setting this project up with a tool called the vue-cli, which will give us a better workflow by taking advantage of build tools such as Babel and Webpack.
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.
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.
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 actually creating them.
Vue.js provides us with different ways of creating components, here we take a look at registering components globally.
This means we can create them once, and then re-use them anywhere in our app.
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.
These self-contained components are also re-usable and we will be using this type of component for the rest of the course.
The CardFront component is the first of our card sections to create. This will be a wrapper for the front section of the card, which we later drop in our text and image components to.
This component will also be one of the sections which we can later switch between to change views.
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.
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
We are making good progress with our knowledge of how components work.
In this video, I want to create 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.
We have our card sections completed now and we can switch between different views by clicking the menu links.
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.
The component itself is pretty simple.
It basically consists of a text area input, it uses 2-way data binding with v-model to update a data property when a user types.
This data property is then emitted to the parent component for us to use when we get to the text output components.
So everything we do for this component, we already know and have covered so far in the course.
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.
Even though we re-use these components, they will also have their own data property so they will work independently.
We already know how to pass data from a child to parent component, we do this by emitting a custom event.
And we already are doing this in our app so we have this part covered.
Next, we need a way to do this the other way around.
The parent component needs to pass this data back to a child component, in our case to the TextOutput component.
We can do this with props, which is short for properties.
Props are custom attributes for passing data to child components.
When using dynamic components and switching between them like we are here, there is a small problem created which we may need to address.
The problem occurs when we switch the active component using the menu links.
If we select a different component, such as Inside Left, then return back to the Front, we see the text we added is lost
Also later in the project when we add text and image inputs to all pages, the same thing will happen to these components too.
So why does this happen?
Earlier in the course we looked at the vue lifecycle which is the stages a vue instance goes through from creation to being destroyed.
When we change the dynamic component, the component we move away from is destroyed and removed from memory.
Vue.js provides us with a simple solution to this which is the keep-alive element.
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 used
For example, if the child component expects a number to be passed to it, but instead it receives a string, then this can cause problems
Using prop validation is a way to set the requirements for the prop to be received, if the validation fails then vue.js will send out a console error during development.
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
This prop is called containerHeight and we are going to pass the value to a style object to set the container height using CSS
To do this, let’s set up a computed property inside of the TextOutput component, so it will only re-render when there is a change to the containerHeight prop.
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.
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.
Welcome to this new section.
We are now going to be stepping things up by taking a deeper look at components, and also dive into Firebase to store the user uploaded images.
The app will also be completed by the end of this section, including all of the components and finishing touches, such as making the images draggable, and also editing the text.
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.
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:
- It will have a HTML file input to allow users to select an image from their system
- It will also push the selected image to Firebase
- It will have a progress bar to show the progress of the upload to Firebase
- There will be an image preview thumbnail
- Also, it will have a button to then confirm we want to use this selected image
- Then finally, it will emit the name of the image selected to the parent component
Later, this image name will be passed to the ImageOutput component to download the file from 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.
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.
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 <img> tag as a src attribute.
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:
- First, create a HTML progress bar to display to the user the progress of the image upload to Firebase
- Then second, we want to $emit the name of the file to the parent component
This is important because when we create the component to display the image on the card, we need to pass the name of the image to it via props, so it can download the correct image from Firebase
We now have all we need to enable us to create the ImageOutput component to actually 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.
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.
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%
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 also add font size options.
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.
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.
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.
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.
All of 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.
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.
Now we are going to move onto the inside right of the card.
Again, this should be pretty straightforward 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.
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.
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.
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.
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.
Welcome to this brand new section!
We are going to take a break from adding new features to our app and components to look at some ways to really make our app a lot nicer to use.
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.
So I hope your looking forward to this new section….
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 also the active phase.
The same also applies for the leaving phase where we also have access to the starting, leaving and active classes.
Here we take a look at what each of these do in a simple example.
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.
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 <transition> wrapper which we can still use with the <keep-alive> 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.
During this section, we have used CSS to create animations and transitions in our app.
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.
Now we know what hooks we have available to us during the transition, we can add them to our app.
I am going to use them to add some instructions to our app.
These instructions will simply tell the user to edit the section on the left, and the changes will appear on the card on the right To do this, I am going to go over to App.vue, and add an enter hook to the components transition.
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.
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.
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 <transition> element.
Also, we take a look at how to override the default transition by adding our own custom class names for appear.
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.
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 <transition-group> element.
We also take a look at how this element automatically adds a <span> element, and also how we can change this if required.
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.
Congratulations on getting to the end of this section.
I hope you have enjoyed learning all about how we can add transitions and animations to our projects.
Hopefully you can now see, that even just adding some small effects to our apps can really finish them off and make them look and feel a lot nicer for the user.
This is another great feature of the vue.js framework and I hope you have enjoyed this section…
- A willingness to learn new things
- Basic computer knowledge, such as saving, renaming, copying files etc
- You should know basic HTML & CSS
October 17: New Section (Transitions & Animations)
September 17: New videos (Event bus & Adding mixins)
What is Vue.js?
And why should I learn it in the first place?
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
Templates and the Virtual DOM
List & conditional rendering
Binding attributes & styles
The Vue instance
Instance properties: Data, Computed, Watchers, Methods, Filters etc
Looping & filters
Refs and other instance properties and methods
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 personalised 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
Plus much more!
Join me now and I look forward to having you on board!
- Anybody looking for an enjoyable, yet powerful tool for building both simple and complex web applications