Vue.js 2 Academy: Learn Vue Step by Step
4.5 (8 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
106 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Vue.js 2 Academy: Learn Vue Step by Step to your Wishlist.

Add to Wishlist

Vue.js 2 Academy: Learn Vue Step by Step

Learn vue.js in a practical, project based approach. Also covers using the Vue-CLI & Firebase storage
4.5 (8 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
106 students enrolled
Created by Chris Dixon
Last updated 9/2017
English
Current price: $10 Original price: $150 Discount: 93% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 7.5 hours on-demand video
  • 1 Article
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand the Vue framework
  • Add vue js to existing web sites or apps
  • Build complex, scalable single page applications
View Curriculum
Requirements
  • A willingness to learn new things
  • Basic computer knowledge, such as saving, renaming, copying files etc
  • You should know basic HTML & CSS
  • A basic Javascript knowledge would be of benefit
Description

Take your HTML, CSS & Javascript skills to the next level by learning one of the hottest Javascript frameworks available today, Vue.js!

If you are unfamiliar with vue.js, or Javascript libraries and frameworks in general, some of the questions you may be asking is:

What is Vue.js?

And why should I learn it in the first place?

Vue.js is a really fun and easy to use Javascript framework for building user interfaces

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
  • Event handling
  • Templates and the Virtual DOM
  • List & conditional rendering
  • Binding attributes & styles
  • The Vue instance 
  • Javascript expressions
  • Instance properties: Data, Computed, Watchers, Methods, Filters etc
  • Looping & filters
  • Refs and other instance properties and methods
  • Vue lifecycly
  • 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
  • Event bus
  • Mixins
  • Plus much more!

So are you ready to learn one of the hottest and most upcoming Javascript frameworks available?

Join me now and I look forward to having you on board!


Who is the target audience?
  • An existing website creator, designer, developer looking to learn a new Javascript framework
  • Somebody looking to improve their Javascript knowledge
  • Students who want to keep up with modern Javascript frameworks
  • Anybody looking for an enjoyable, yet powerful tool for building both simple and complex web applications
Students Who Viewed This Course Also Viewed
Curriculum For This Course
84 Lectures
07:31:45
+
Introduction & Getting Started
3 Lectures 06:40

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 begin!

Preview 02:45

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

What is Vue & why should I learn it?
02:04

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.

Visual Studio installation
01:51
+
Vue Basics: Guest List App
16 Lectures 01:00:23

Welcome to this new section and Vue.js project!

Section intro
00:30

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!

Download project starter
02:32

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.

Installing Vue.js
03:05

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.

Preview 07:28

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. 

Templates & the virtual DOM
03:31

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.

Two way data binding with v-model
03:08

Event handlers are a commonly used tool in Javascript applications. Vue.js allows us to add these easily to our code.

We can use all of the standard event handlers we can normally use in Javascript such as onclick, onhover and onsubmit.

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().

Event handling & methods
05:46

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. 

List rendering
02:54

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.

Preview 05:19

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 attributes to elements
04:11

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.

Binding styles
04:48

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

Vue shorthand syntax
02:42

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. 

Outputting text & HTML
06:25

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.

V-if vs v-show
03:10

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!

Using Javascript expressions
04:22

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

Section outro
00:32
+
A deeper look at Vue: Guest list app
17 Lectures 01:30:08

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

Section intro
00:39

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 a 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.

Adding a progress bar
07:46

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.

Computed properties
08:57

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.

Watchers
03:50

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. 

Key events and modifiers
03:21

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.

Filters
06:08

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.

More on looping: keys & index numbers
05:27

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.

Using multiple Vue instances
06:25

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.

Looping with objects
06:56

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.

Adding our navigation links & keys
06:16

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.

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.

Accessing vue instances externally
04:32

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.

Vue instance properties & methods
04:50

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.

Referencing elements with ref
04:45

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.

Using string templates
07:06

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.

The Vue lifecycle
05:40

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.

Vue lifecycle hooks in action
06:51

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.

Section outro
00:39
+
Build Tools & Workflow: Creative Cards App
6 Lectures 30:25

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.

Section intro
00:37

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. 

Installing Node & NPM
04:08

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.

Scaffolding projects with the vue-cli
08:06

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.

Exploring our project layout & build tools
09:26

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.

Using the data object with single file templates
07:49

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.

Section outro
00:19
+
Introduction to Components: Creative Cards App
20 Lectures 01:58:02

Welcome to this new section!

We are now going to look at using components in our vuejs apps. And also the important topic of how components communicate with others.

Then finally, we will finish off this section by looking at using slots for content distribution.

Section intro
00:41

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.

What are components?
05:07

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.

Registering global components
10:57

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.

Registering local components
05:26

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.

Creating single file components
08:37

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.

Adding the card front component
09:07

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. 

Emit data to parent components
09:21

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

Dynamic components
02:49

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.

Creating the additional card components
05:53

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.


Creating the text input component
09:40

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.

Receiving data from the text input
04:38

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.


Creating the text output component
03:38

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.

Passing data with props
05:37

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.

Keeping components alive
02:26

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.

Scoping CSS styles
07:40

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.

Prop validation
05:01

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.

Passing prop data to a style object
03:19

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.

Introduction to slots
09:38

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.


Slot scope & fallback content
04:57

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.


Named slots
03:30
+
Components Continued & Firebase Storage: Creative Cards App
21 Lectures 02:24:26

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.

Setting up Firebase
06:55

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  

Creating the Image Upload component
06:40

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.

Uploading images to Firebase
09:44

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 <img> tag as a src attribute.

Image preview thumbnail
04:11

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


Upload progress bar & $emit file data
08:54

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.

Image Output component
09:09

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.

Downloading images from Firebase
06:15

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%
Set image button
07:20

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.

Text options menu: font sizes
08:00

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.

Text options menu: text alignment
05:03

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.

Text options menu: font style & weight
09:56

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.

Remove image button
04:21

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.

Passing data with callbacks
06:40

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.

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.

Making images draggable
05:48

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.

Finishing the CardInsideLeft component
04:50

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.

Finishing the CardInsideRight component
02:48

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.

Finishing the CardBack component
03:39

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.

Introduction to the event bus
07:26

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.

Sending events to the event bus
06:51

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.

Receiving events from the event bus
13:05

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.

Adding mixins
06:51
+
Thank You
1 Lecture 01:33

Thanks for taking the Vue.js Academy course.

I hope you have enjoyed this course and gained a lot from it!

Thank you
01:33
About the Instructor
Chris Dixon
4.5 Average rating
1,176 Reviews
14,867 Students
8 Courses
Web Developer and teacher at CodeSmart Academy

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.

Chris