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:
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:
Join me now and I look forward to having you on board!
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.
Let's take a moment to look at exactly what vue.js is, and how using it can benefit us.
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.
Welcome to this new section and Vue.js project!
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!
Installing Vue.js is simple. Here we take a look at 4 different ways we can include it in our projects.
To begin we add the CDN version to keep things simple.
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.
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.
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().
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.
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.
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.
Binding styles is a great way to add CSS into our application.
W take a look at adding dynamic styling inline, then move on to adding a style object as a vue data property.
This video shows some of the shorthand syntax you can use with vue.js, specifically for v-bind and v-on.
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.
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.
Congratulations for getting to the end of this section, hopefully by now you will be getting more comfortable with Vue.js.
Welcome to this new section where we will begin to take a deeper look into what Vue.js has to offer.
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.
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.
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.
Vue.js also provides us with a property called filters. Filters are used to apply common text formatting or transformations.
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.
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.
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.
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.
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 ran.
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.
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.
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.
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.
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.
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.
Congratulations, you have reached the end of this section. This has been a short, but important section.
We now have our project set up and are ready to move onto building it with 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.
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.
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.
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.
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.
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.
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.
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.
Now we are going to look a little deeper into how Vue.js handles slots.
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.
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.
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:
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:
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:
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 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.
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.
Thanks for taking the Vue.js Academy course.
I hope you have enjoyed this course and gained a lot from it!
Hello, My name is Chris and I am a web developer and online teacher. I am passionate about what I do and about teaching others. I have started various online and offline businesses.
Whatever your reason for learning to build websites you have made an excellent career choice.
My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and i have watched the web evolve into what it is today.
I try to make my courses enjoyable and try to remember what it was like when I was learning. I also believe the best way to learn is by doing and try to include as many practical examples as possible in my courses.
Thanks for taking an interest and I look forward to you joining me.