Vue JS: From Beginner to Professional

Learn Vue.js, a simple and popular JavaScript framework. Build complex SPAs with Vue JS and become a VueJS professional!
4.7 (7 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.
55 students enrolled
$10
$20
50% off
Take This Course
  • Lectures 50
  • Length 4 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2016 English

Course Description

### This course is currently a work in progress. The price will gradually go up as more content is added, so save a few bucks by enrolling early! ###

VueJS 2 has quickly become incredibly popular, both due to how powerful the JavaScript framework is, but also how easy it is to learn. Vue is much easier to learn than other JavaScript frameworks such as Angular and React, meaning that you can start building your first Vue application in no time!

In this course, you will learn how to build reactive web applications at any scale with Vue. You will learn the theory that you need to know about Vue.js, and we will be building several example applications as we go along, demonstrating the explained concepts in practice. The course lectures include examples when going through new material, followed by exercises that you can optionally choose to solve - and we walk through the solutions together.

Whether or not you have prior experience with VueJS, this course is an easy way for you to learn the framework! Perhaps you have struggled with large and complex frameworks such as Angular? Don't worry, Vue.js is much easier to learn! Getting up and running fast is at the heart of Vue, so no more long hours of configuration just to show "Hello World!" Or perhaps you have no experience with reactive JavaScript frameworks and come straight from using jQuery? No problem! Vue.js is an excellent choice for your first framework, and is one of the easiest one to start out with.

Despite the fact that VueJS is easy to learn, it is an incredibly powerful framework that can be used to build large web applications as well as small ones. Unlike many other frameworks, Vue.js does not try to take control of your application, and allows you to let the framework control only parts of your application - something that is perfect for migrating legacy applications to a more modern framework without doing a complete rewrite at once!

This course starts from scratch with teaching you how to build a "Hello World!" application in VueJS and moves towards building advanced applications step by step.

What are the requirements?

  • You should have basic knowledge of JavaScript, HTML and CSS
  • Knowledge of ES6 is a plus, but not a requirement

What am I going to get from this course?

  • Build Vue.js applications at any scale
  • Understand the theory of Vue.js
  • Use Vue.js for complex web applications, including Single Page Applications (SPA)
  • Use modern tools for developing, building and deploying Vue.js projects

Who is the target audience?

  • Developers who have little or no prior experience with Vue.js
  • Developers who want to learn a modern and simple JavaScript framework
  • Developers who want to learn how to build reactive web applications

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Getting Started
06:41

Let's see just how easy it is to create our first Vue.js application with the classic "Hello World!" application as an example.

02:27

Before diving deeper into Vue.js, let's see what the framework is actually all about and why it has become so popular.

03:12

In the beginning of the course, we will be using JSFiddle for going through small examples. This lecture shows you how to set Vue.js up in any text editor or IDE in case you prefer that approach instead.

01:13

Before getting started with some Vue.js theory and examples, let's just take a moment to talk about the structure of this course first.

Section 2: Fundamentals of Vue.js
00:50

Almost ready to get our hands dirty with Vue.js. First, let's just briefly talk about the format of this section of the course.

04:19

The first thing you should know is how to output data, and for this, we will be using something called "string interpolation." This is how we can output data properties from within Vue.js templates.

07:03

See how you can use methods for adding more complex JavaScript logic and how to use these methods from within templates.

02:18

There are a few gotchas when working with ES6 arrow function in Vue.js. This lecture tells you what to watch out for when coding in Vue.js.

04:38

This lecture introduces the concept of Vue.js directives by showing you the v-bind directive.

07:05

It's time to take what we have learned so far and put it into practice by completing a few exercises together.

01:54

It is also possible to use expressions within directives, and this lecture shows you how to do it.

02:09

It's time to learn how to make Vue.js applications respond to user input by using the v-on directive. This lecture shows an example that uses the click event on a button.

04:02

We have already seen how to implement event listeners. This lecture shows how to pass arguments to event listeners.

05:15

This lecture introduces event modifiers, which can be used to prevent default browser actions or stop event propagation, for example.

03:57

Having learned what event modifiers are, it's time to talk a bit about key modifiers. Key modifiers can be used to respond to events only when one or more specific keys are pressed on the keyboard.

04:17

Next up is something called modifier keys. Modifier keys refer to the ctrl, alt, shift and Command/Windows keys, and this lecture shows how to use these in combination with key modifiers.

08:39

Having seen examples of how to respond to events and how to use modifiers, it's time for you to use this knowledge for writing a bit of code on your own! Afterwards, we will be walking through the solutions together step by step.

07:32

This lecture introduces the v-model directive which implements something called two-way data binding. This term refers to how data properties can be updated automatically in response to user input, and how data automatically flows in the other direction, too.

03:42

Outputting raw HTML would be dangerous and leave users at risk. Vue.js therefore automatically escapes the data it outputs for you, but let's see how it does this and how to output HTML that should be rendered by browsers with the v-html directive.

01:31

Sometimes you may want to only render a given HTML element once, perhaps for performance reasons. You will see how to accomplish this with the v-once directive.

06:56

Now it's time to embed a bit of boolean logic into our templates, by using the v-if, v-else-if and v-else directives, allowing us to conditionally add elements to the DOM.

02:09

Similar to the v-if directive, one can show or hide HTML elements with the v-show directive. This lecture shows you how to do that and what happens within the DOM when doing so.

04:23

By default, the string interpolation syntax is displayed when loading a page, until Vue.js is ready. This lecture looks at how the v-cloak directive can be used to prevent this by hiding elements until Vue is ready.

06:31

This lecture dives into how we can loop through arrays within Vue.js templates and shows how to output an array of strings as well as an array of objects on the page.

01:33

Sometimes we may need to access a loop's index when using the v-for directive. This lecture shows how to slightly modify the v-for syntax to gain access to this index.

03:17

Let's see how we can loop through a given object's properties with the v-for directive. We will see how to access both the property names and values.

02:01

This lecture shows how to loop through a number range (e.g. from 1 to 10) with the v-for directive.

06:16

When using the v-for directive, there is something to watch out for. We will dive into how Vue.js updates the DOM when changing the values that a v-for directive operates upon, by showing how it can cause problems as well as how to solve it.

04:33

We also need to be aware of how Vue.js detects changes that are applied to arrays and how changes are not registered when using the square bracket syntax. We will see how to solve this with the Vue.set method.

04:21

Having learned two-way data binding, conditionals and loops, it's time to practice this theory with some exercises. We will go through the solutions to the exercises together afterwards.

06:54

This lecture introduces computed properties that can be used when data properties depend on each other. We will see how to implement computed properties, as well as when to use them.

04:58

Having seen how to implement computed properties, we will now take a look at how we can add getter and setter methods to these computed properties in order to be able to implement more complex computed properties.

09:14

While Vue.js automatically detects changes made to values, one can also implement custom watchers to run arbitrary code whenever a given data property's value changes. We will see how to implement simple search functionality by using a watcher.

06:39

Now that we have learned about computed properties and watchers, let's put this theory to work by solving some exercises and going through their solutions afterwards.

06:39

Filters in Vue are used to apply text transformation when outputting data. In this lecture, we look at a few examples on how to do just that.

05:44

It's time to practice what we just learned about filters in Vue.js.

10:11

We typically want to apply some CSS to our page. This lecture shows you how to use the v-bind directive to apply styles to HTML elements with the style attribute.

10:20

Similar to how we can apply inline styles to HTML elements, we can also use the v-bind directive to apply classes to the class attribute, which this lecture covers through several examples.

06:38

Time to practice what we learned about applying styles to HTML elements in the last two lectures. After you have hopefully tried to solve the exercises yourself, we will go through the solutions together afterwards.

03:19

Now that we have used the v-bind and v-on directives quite extensively so far, it's time to see the shorthand versions of these directives, which can save you a bit of time.

Section 3: Example application #1: E-commerce
03:19

Before we begin coding, let's first see the application that we are going to build.

06:09

The first thing we will do, is to use the v-for directive to display the products. We will also implement a filter for displaying currencies properly.

02:48

Now that we have displayed the products, it's time to implement so that we can add them to the shopping cart.

04:43

Let's add a summary of the number of items in the cart as well as the total price, to the top of the page. To do this, we will use a computed property for calculating the total price for all of the products that are in the cart.

04:26

Before displaying the products in the cart, we need a way of switching between the two views or "pages."

05:29

In this lecture, we will display the products that are in the cart, as well as apply taxes to the price. We will do this by introducing another computed property.

04:35

If we have already added a given product to the cart, it would be nice to increase its quantity instead of adding it to the cart once again. We'll do exactly that in this lecture.

06:48

Within the cart, we want to be able to increase and decrease the quantity of each product that has been added, and we'll do that in this lecture.

03:07

As the last feature of our application, we will add the checkout function.

02:41

This lecture summarizes what we just accomplished with our example application and which Vue techniques we used to build the application.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Bo Andersen, Lead Developer

My name is Bo Andersen and I am a software developer from Denmark.

I am a software developer who works at a successful company, which operates one of the largest websites in Denmark. I have worked with programming for a decade, primarily with web development. I have a bachelor's degree in computer science and have worked with programming in my spare time before, during and after completing my education.

If you would like to see my complete resume and experience, please have a look at my LinkedIn profile. I have also been blogging about programming subjects for a few years, so I encourage you to have a look at my website if you are curious.

Ready to start learning?
Take This Course