We may earn an affiliate commission when you visit our partners.
Course image
Bo Andersen

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.

Read more

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.

Enroll now

What's inside

Learning objectives

  • 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)

Syllabus

This section introduces Vue.js and shows how to get set up and ready for the next section, where we will go through a lot of examples.

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

Read more

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

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.

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.

What the Q&A is for, and what it isn't for.

After completing this section, you will understand the basics of Vue.js and will be able to implement small Vue.js applications.

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.

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.

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

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.

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

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

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

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

This section takes everything that we have learned so far and implements an e-commerce application where one can add items to the cart, modify quantities and checkout.

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

The source code code for the example application that we will build in this section, is available within a GitHub repository.

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.

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

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.

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

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.

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.

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.

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

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

This section takes a closer look at the Vue instance, so that you will understand more of the inner workings of the Vue instances that we have created so far.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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.

This section walks through setting up the Vue CLI and bootstrapping a project with Webpack. We also install the Vue browser extension and learn how to build projects for production.

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

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

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.

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

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.

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

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

Learn the basics of working with components in Vue.

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

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

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

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

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

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

Just a few words on how to organize components.

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

Learn how to pass data from one component to another.

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.

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.

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.

Time to practice communicating between components.

Learn how to pass markup to components with slots.

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

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.

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.

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.

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.

This section uses most of what you learned about components and shows how to use the theory in practice. This will make you feel more comfortable applying the knowledge to your own projects.

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

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Teaches Vue.js, which is a popular JavaScript framework
Designed for beginners who are new to Vue.js
Facilitated by Bo Andersen, an experienced instructor
Focuses on hands-on learning with examples and exercises
Introduces advanced techniques such as Vuex for state management
Must complete the course in a certain sequence

Save this course

Save Vue JS 2: From Beginner to Professional (includes Vuex) to your list so you can find it easily later:
Save

Reviews summary

Solid vue.js course for beginners

According to students, Vue.js 2: From Beginner to Professional (includes Vuex) is a great course. Explanations are clear, concepts are taught well, and the course is well-structured.
The instructor is knowledgeable and explains concepts well.
"Mr Bo Anderson course. He is exceptionally good in explaining what is Vuejs."
The course is well-structured and organized.
The explanations are clear and easy to follow.

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Vue JS 2: From Beginner to Professional (includes Vuex) with these activities:
Develop a web application prototype
Develop a prototype of a web application using the concepts and techniques learned in this course.
Show steps
  • Define the scope and requirements of the application.
  • Design the user interface and user experience.
  • Implement the front-end and back-end components of the application.
  • Test and debug the application.
  • Deploy the application to a hosting platform.
Show all one activities

Career center

Learners who complete Vue JS 2: From Beginner to Professional (includes Vuex) will develop knowledge and skills that may be useful to these careers:
Web Developer
As a Web Developer, you will be responsible for building and maintaining websites. You will need to have a strong understanding of HTML, CSS, and JavaScript. This course will help you build a strong foundation in these technologies. You will also learn how to use Vue.js, a popular JavaScript framework for building web applications. This course will give you the skills you need to be successful as a Web Developer.
Software Engineer
As a Software Engineer, you will be responsible for designing, developing, and maintaining software applications. You will need to have a strong understanding of computer science fundamentals, as well as programming languages and software development tools. This course will help you build a strong foundation in these areas. You will also learn how to use Vue.js, a popular JavaScript framework for building web applications. This course will give you the skills you need to be successful as a Software Engineer.
Front-End Developer
As a Front-end Developer, you will be responsible for the design and implementation of the user interface of a website or application. You will need to have a strong understanding of HTML, CSS, and JavaScript. This course will help you build a strong foundation in these technologies. You will also learn how to use Vue.js, a popular JavaScript framework for building web applications. This course will give you the skills you need to be successful as a Front-end Developer.
UI/UX Designer
As a UI/UX Designer, you will be responsible for the user experience of a website or application. You will need to have a strong understanding of human-computer interaction and design principles. This course will help you build a strong foundation in these areas. You will also learn how to use Vue.js, a popular JavaScript framework for building web applications. This course will give you the skills you need to be successful as a UI/UX Designer.
Product Manager
As a Product Manager, you will be responsible for the planning, development, and launch of new products. You will need to have a strong understanding of market research, product development, and business strategy. This course will help you build a strong foundation in these areas. You will also learn how to use Vue.js, a popular JavaScript framework for building web applications. This course will give you the skills you need to be successful as a Product Manager.
Data Scientist
As a Data Scientist, you will be responsible for collecting, analyzing, and interpreting data. You will need to have a strong understanding of statistics, machine learning, and data mining. This course will help you build a strong foundation in these areas. You will also learn how to use Vue.js, a popular JavaScript framework for building web applications. This course will give you the skills you need to be successful as a Data Scientist.
Business Analyst
As a Business Analyst, you will be responsible for analyzing business processes and identifying areas for improvement. You will need to have a strong understanding of business analysis techniques and tools. This course will help you build a strong foundation in these areas. You will also learn how to use Vue.js, a popular JavaScript framework for building web applications. This course will give you the skills you need to be successful as a Business Analyst.
Project Manager
As a Project Manager, you will be responsible for planning, executing, and closing projects. You will need to have a strong understanding of project management methodologies and tools. This course will help you build a strong foundation in these areas. You will also learn how to use Vue.js, a popular JavaScript framework for building web applications. This course will give you the skills you need to be successful as a Project Manager.
Technical Writer
As a Technical Writer, you will be responsible for creating and maintaining technical documentation. You will need to have a strong understanding of technical writing principles and tools. This course will help you build a strong foundation in these areas. You will also learn how to use Vue.js, a popular JavaScript framework for building web applications. This course will give you the skills you need to be successful as a Technical Writer.
Quality Assurance Analyst
As a Quality Assurance Analyst, you will be responsible for testing and evaluating software applications. You will need to have a strong understanding of quality assurance principles and tools. This course will help you build a strong foundation in these areas. You will also learn how to use Vue.js, a popular JavaScript framework for building web applications. This course will give you the skills you need to be successful as a Quality Assurance Analyst.
IT Support Specialist
As an IT Support Specialist, you will be responsible for providing technical support to users. You will need to have a strong understanding of computer hardware and software. This course will help you build a strong foundation in these areas. You will also learn how to use Vue.js, a popular JavaScript framework for building web applications. This course will give you the skills you need to be successful as an IT Support Specialist.
Computer Systems Analyst
As a Computer Systems Analyst, you will be responsible for analyzing and designing computer systems. You will need to have a strong understanding of computer hardware and software. This course will help you build a strong foundation in these areas. You will also learn how to use Vue.js, a popular JavaScript framework for building web applications. This course will give you the skills you need to be successful as a Computer Systems Analyst.
Web Designer
As a Web Designer, you will be responsible for the design and layout of websites. You will need to have a strong understanding of design principles and tools. This course will help you build a strong foundation in these areas. You will also learn how to use Vue.js, a popular JavaScript framework for building web applications. This course will give you the skills you need to be successful as a Web Designer.
Database Administrator
As a Database Administrator, you will be responsible for the management and maintenance of databases. You will need to have a strong understanding of database management systems. This course will help you build a strong foundation in these areas. You will also learn how to use Vue.js, a popular JavaScript framework for building web applications. This course will give you the skills you need to be successful as a Database Administrator.
Network Administrator
As a Network Administrator, you will be responsible for the management and maintenance of computer networks. You will need to have a strong understanding of network protocols and technologies. This course will help you build a strong foundation in these areas. You will also learn how to use Vue.js, a popular JavaScript framework for building web applications. This course will give you the skills you need to be successful as a Network Administrator.

Reading list

We've selected six books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Vue JS 2: From Beginner to Professional (includes Vuex).
Offers practical solutions to common Vue.js development challenges by applying design patterns. It provides valuable insights into the effective use of Vue.js and can help experienced developers enhance their Vue.js skills.
Provides a comprehensive guide to design patterns for Vue.js. It covers topics such as the Vue.js architecture, best practices for developing Vue.js applications, and advanced techniques for building complex applications.
Provides a comprehensive overview of Vue.js 2.0, covering key concepts such as the Vue.js virtual DOM, component communication, and state management. It is written in a clear and easy-to-follow style, making it suitable for both beginners and experienced developers.
Provides a collection of best practices and design patterns for building Vue.js applications. It covers topics such as component design, state management, and testing. This book great resource for developers who want to write clean, maintainable, and scalable Vue.js code.
Provides a practical guide to building Vue.js applications. It covers topics such as the Vue.js architecture, best practices for developing Vue.js applications, and advanced techniques for building complex applications.
Serves as a comprehensive reference for Vue.js developers, providing detailed explanations of the framework's features and best practices.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Vue JS 2: From Beginner to Professional (includes Vuex).
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser