Vue JS 2: From Beginner to Professional
4.6 (54 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.
375 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Vue JS 2: From Beginner to Professional to your Wishlist.

Add to Wishlist

Vue JS 2: 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.6 (54 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.
375 students enrolled
Created by Bo Andersen
Last updated 5/2017
English
Learn Fest Sale
Current price: $10 Original price: $145 Discount: 93% off
19 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 15 hours on-demand video
  • 12 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • How to build advanced Vue.js applications
  • How to build single page applications (SPA)
  • Understand the theory and how Vue works under the hood
  • How to manage state in large applications with Vuex
  • Communicating with servers with HTTP
  • Use modern tools for developing and building applications (e.g. webpack)
View Curriculum
Requirements
  • You should have basic knowledge of JavaScript, HTML and CSS
  • Knowledge of ES6 is a plus, but not a requirement
Description

Vue JS 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 Vue JS 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! Apart from learning how to build single page applications (SPAs), you will also learn how to manage state in large applications with Vuex.

This course starts from scratch with teaching you how to build a "Hello World!" application in Vue.js and moves towards building advanced applications step by step. By the end of this course, you will be able to build complex and large web applications with Vue.

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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 203 Lectures Collapse All 203 Lectures 14:47:11
+
Getting Started
4 Lectures 13:33

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

Preview 06:41

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

Preview 02:27

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.

Preview 03:12

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.

Preview 01:13
+
Fundamentals of Vue.js
36 Lectures 03:01:47

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.

Introduction to this section
00:50

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.

Working with templates
04:19

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

Methods
07:03

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.

A word about ES6 arrow functions
02:18

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

Introduction to directives
04:38

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

Exercises: String interpolation, methods and directives
07:05

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

Using expressions with directives
01:54

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.

Introduction to events
02:09

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

Passing arguments to event listeners
04:02

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

Directive & event modifiers
05:15

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.

Key modifiers
03:57

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.

Modifier keys
04:17

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.

Exercises: Events & modifiers
08:39

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.

Two-way data binding
07:32

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.

Security: Outputting and escaping HTML
03:42

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.

Rendering elements only once
01:31

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.

Conditionally rendering elements
06:56

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.

Showing and hiding elements
02:09

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.

Hiding elements until the Vue instance is ready
04:23

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.

Looping through arrays
06:31

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.

Accessing the loop index
01:33

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.

Looping through object properties
03:17

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

Looping through number ranges
02:01

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.

Understanding the v-for update strategy
06:16

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.

Array change detection
04:33

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.

Exercises: Two-way data binding, conditionals, and loops
04:21

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.

Optimizing performance with computed properties
06:54

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.

Adding getters & setters to computed properties
04:58

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.

Watchers
09:14

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.

Exercises: Computed properties & watchers
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.

Filters
06:39

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

Exercises: Filters
05:44

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.

Styling with inline CSS styles
10:11

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.

Styling with CSS classes
10:20

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.

Exercises: Styling with inline styles and classes
06:38

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.

Shorthands for events and bindings
03:19
+
Example application #1: E-commerce
10 Lectures 44:05

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

Preview 03:19

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.

Displaying products
06:09

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

Adding products to the cart
02:48

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.

Displaying the cart info in the menu
04:43

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

Switching between views
04:26

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.

Displaying the cart
05:29

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.

Handling adding products already in cart
04:35

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.

Increasing and decreasing product quantities
06:48

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

Checking out
03:07

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

Wrap up
02:41
+
Deep dive: The Vue Instance
14 Lectures 01:12:24

This section of the course includes some theory that is great to know, although not strictly required for using Vue. Nevertheless, it is highly recommended to complete the section, but you could also skip it for now and come back to it later, if you prefer to jump straight to coding.

Introduction to this section
00:55

We have created quite a few Vue instances by now, but we haven't taken a look at how we can interact with a Vue instance once it has been initialized (except for with events). This is what we will cover in this lecture.

Accessing a Vue instance outside of its declaration
02:26

All of our examples so far have only included one Vue instance. In this lecture you will see how multiple Vue instances can be used on the same page.

Using multiple Vue instances on the same page
02:58

We have made use of how Vue proxies data so far, but we haven't taken a closer look at how it actually works. This lecture dives into this and talks about proxy methods and more.

Proxying
06:56

Having looked at how Vue proxies data, methods and more, let's take a closer look at how Vue.js keeps track of which changes are made to data and how Vue reacts to them.

Understanding reactivity
06:40

Although it visually looks like it, the DOM is not updated synchronously whenever data changes. This lecture explains how Vue updates data by using a queue and something called an event loop.

Asynchronous update queue
05:22

Vue uses a so-called virtual DOM as a JavaScript representation of the DOM. This provides various useful benefits. Why VueJS uses this virtual DOM and how it does it, is the subject for this lecture.

Preview 04:28

We have previously seen how to add watchers to a Vue instance, but they can also be added to Vue instance dynamically. This approach provides some additional flexibility, which this lecture shows examples of.

Adding watchers dynamically
08:28

Sometimes you may need to access the DOM. VueJS provides an elegant way of doing this by using a property on the Vue instance in combination with an HTML attribute.

Accessing the DOM with $refs
07:49

Until now, we have always used an "el" property on the Vue instance to mount it to a template. Alternatively, one can mount the Vue instance dynamically by using the $mount method.

Mounting templates dynamically
03:14

Instead of using the "el" property, one can actually add an inline template to a Vue instance, which you will see in this lecture.

Using inline templates
05:41

Although typically not necessary, it is possible to destroy a Vue instance manually. This short lecture shows how.

Destroying a Vue instance
01:40

We have used Vue instances until now, but what actually happens behind the scenes? This lecture walks through the lifecycle of Vue instances and discusses the various phases and lifecycle hooks that are available to us as developers.

Preview 04:13

Now that we know what a Vue instance's lifecycle looks like, it's time for some examples on how to run custom code at various phases of the Vue instance lifecycle. This can be done by using lifecycle hooks, which this lecture is all about.

Using lifecycle hooks
11:34
+
Setting up a Development Environment with Webpack & Vue CLI
7 Lectures 20:54

In this section, we will be setting up a development environment with Vue CLI, webpack, and a development server.

Introduction to this section
00:59

This lecture shows how to install the Vue developer tools for the Chrome browser.

Installing Chrome developer tools extension
01:30

What is the Vue CLI? And what are the differences between the templates that can be chosen for setting up a project? Get the answer to those questions in this lecture.

Introduction to Vue CLI
02:26

Using the knowledge from the previous lecture, we will set up a project by using the Vue CLI and the webpack-simple template.

Creating a project with Vue CLI
04:43

Now that we have set up a project, it's time to take a closer look at the structure of it, i.e. which files were created for us and what they contain.

Understanding the project structure
08:14

This lecture takes a closer look at single file components, which we will be working with extensively through the remainder of the course.

Single file components
01:43

See how to make a build of a project for production, including minifying the JavaScript code.

Building for production
01:19
+
Components
19 Lectures 01:22:34

Let's introduce Vue components and create our very first component in Vue.js.

Introduction to components
06:16

Contrary to Vue instances, the "data" property must be a function when working with components. This lecture shows you why this is the case.

Why the data property must be a function
03:39

Components can be either global or local. See the difference and how to register a component as local or global.

Global & Local Components
03:44

When adding and using components, one can choose between using camelCase, kebab-case or PascalCase. This lecture shows how.

Component naming conventions
02:07

Now that we have learned the very basics of components, it's time to create one within a project created with Vue CLI.

Creating a component in the project
04:21

It's time to practice what you learned on global, local and child components - this time within a development environment.

Exercises: Global, local and child components
08:54

Just a few words on how to organize components.

Organizing components
02:04

Styles can be either global or scoped in the context of components. Learn the difference and the quirks of each approach.

Global & scoped styles
04:41

Learn how to pass data from one component to another.

Passing data to components
04:46

Learn how to specify the type of the data that is passed to a component. Also learn how to specify whether or not a data property is required, and how to specify a default value.

Validating passed data
03:13

We have seen how to work with DOM events, but now it's time to learn how to work with events in the context of components. These events can be used to communicate between components, as you will see.

Working with events
07:08

Apart from using events to communicate between components, this can also be done by using a so-called event bus. Learn how in this lecture.

Communicating through an event bus
04:43

Time to practice communicating between components.

Exercises: Passing data & events
09:05

Learn how to pass markup to components with slots.

Slots
03:44

Learn how to pass more than a single piece of markup to components with named slots.

Named slots
03:16

Learn how to render components dynamically in scenarios where you don't know which component should be rendered at the time of writing the code.

Dynamic components
04:49

Instead of destroying and creating components every time a dynamic component changes, they can be kept alive, which also optimizes performance. Learn how in this lecture.

Keeping dynamic components alive
01:41

With dynamic components, there are two additional lifecycle hooks; the "activated" hook and the "deactivated" hook. Learn how to use these as well as when they are invoked.

Dynamic components lifecycle hooks
02:19

We previously installed the Vue developer extension for Google Chrome. Now that we have a few components, let's take a closer look at its capabilities and how it is useful.

Vue developer tool in action
02:04
+
Example application #2: Mail application
17 Lectures 01:21:15

Before starting to implement the application, let's see what it is that we are going to build.

Preview 03:30

In this lecture, we prepare most of the components that we are going to need for the application.

Creating components for the views
03:21

In this lecture, we prepare the sidebar's markup so that we are ready to implement switching between the application's different views.

Adding the sidebar markup
02:26

Time to implement so that we can switch between the application's various views.

Switching between views
13:50

We need some data to work with when building the application, so we will import some messages from a file.

Loading messages from file
01:50

It would be nice to display the number of messages for each view within the sidebar, so that's what we will do in this lecture.

Adding numbers to navigation menu
05:41

Having prepared most of the application until now, let's move on to implementing the first view; the inbox.

Displaying the inbox
11:32

Within the inbox, it should be possible to mark messages as important, and also to undo this. That's what this lecture is all about.

Marking messages as important
03:02

We implemented the inbox earlier, so now it's time to implement a couple of other views; sent messages, important messages, and trashed messages.

Displaying sent, important and trashed messages
03:09

It should be possible to view a single message when clicking it, so we will implement that now.

Displaying a message
06:40

When opening a message, it would be convenient if the message was automatically marked as read, so let's implement that.

Automatically marking messages as read
01:39

Of course this application is not a one way street, so we need a way to navigate back to where we came from when viewing messages. Let's add a button that does that.

Navigating back to previous views
05:21

Every mail application with respect for itself provides a way to delete unwanted messages. This one is not exception.

Deleting messages
02:37

While messages are automatically marked as read when viewing them, it should also be possible to do this manually, and also to mark them as unread.

Marking messages as read or unread
03:54

In this lecture, we will add a button to the inbox view which simulates refreshing the inbox.

Refreshing the inbox
04:49

This lecture goes through implementing a way to simulate sending a new message.

Sending messages
06:53

This lecture briefly summarizes what we implemented and which aspects of the previous sections that we applied in practice when doing so.

Wrap up
01:01
+
Mixins & Filters
5 Lectures 17:32

This lecture briefly introduces the concept of mixins, being a way to merge options into a Vue instance (and thereby component).

Introduction to mixins
02:17

See how to implement a mixin and how the options are merged into a component.

Using mixins
02:51

This lecture discusses how mixins are merged into Vue instances and components.

How mixins are merged in
07:07

It's also possible to add global mixins, and this lecture shows how to do it.

Global mixins
02:43

Earlier in the course, you saw how to implement filter. This lecture takes that one step further and shows how to implement a global filter. This is something that is useful when working with multi-page applications.

Global filters
02:34
+
Forms
8 Lectures 27:05

This lecture is a brief recap of what was covered earlier in the course; using the v-model directive together with text inputs and textareas.

Text inputs & textareas
04:58

This lecture shows how to work with checkboxes.

Checkboxes
06:23

This lecture shows how to work with radio buttons.

Radio buttons
02:01

This lecture shows how to work with select elements, also commonly referred to as dropdowns.

Selects (dropdowns)
02:05

Time to recap on a previous subject, being modifiers.

Modifiers
02:59

We used the v-model directive throughout this course, but how does it actually work? Let's take a look in this lecture.

How the v-model directive works
01:47

In some cases, we might want to populate form elements with default values based on existing data. You will learn how in this lecture.

Adding default values
04:04

Again something that we have already covered, but that is good to talk about in the context of forms; submitting forms.

Submitting forms
02:48
+
Animations & Transitions
16 Lectures 01:04:21

Before getting started with looking at how to use transitions and animations, let's first introduce what the difference is between the two.

Preview 03:29

This lecture introduces how to transition single elements.

Understanding single element transitions
01:52

Transitions can be implemented by using CSS classes. This lecture introduces how this works.

Transitioning with CSS classes
04:20

Time to implement our first transition by using CSS classes.

Implementing our first transition
07:58

Apart from using default class names, one can also specify the name of a transition to change the default names.

Specifying transition names
02:37

We just saw how to change the names of transitions, and likewise it is also possible to change the class names.

Preview 05:48

Time to implement a custom animation by using CSS.

Implementing a custom CSS animation
04:27

Transitions and animations are two different things, although related. They can be mixed and used simultaneously, something that this lecture explains.

Mixing transitions and animations
04:05

See how to transition between elements, i.e. an element that is replaced by another element.

Transitioning between elements
03:01

We can also control the transition mode and control the order in which transitions occur (in relation to when elements are added and removed).

Transition modes
02:08

Perhaps we want to apply an animation or transition when loading the page initially, something this lecture looks at.

Transitioning elements initially (on page load)
01:51

Transitions can be implemented with CSS classes as we saw, but the same can be done by utilizing a number of JavaScript hooks.

Transitioning with JavaScript hooks
06:12

When animating or transitioning through JavaScript, we can disable usage of CSS classes to improve performance.

Ignoring CSS classes
02:38

This lecture shows how to apply transitions to dynamic components.

Transitioning dynamic components
02:58

So far, we've seen how to transition single elements. This lecture shows how to transition multiple elements, which is not all that different.

Transitioning multiple elements
05:21

It is also possible to transition when elements move in response to data changes, which is what this lecture is about.

Preview 05:36
3 More Sections
About the Instructor
Bo Andersen
4.3 Average rating
764 Reviews
3,973 Students
3 Courses
Lead Developer

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

I am a software developer who has previously worked a successful company, which operates one of the largest websites in Denmark, before deciding to teach full time. 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.