Last Update: Feb 25, 2024

Learn Vue.JS framework by hands-on examples

  • Free

About Course

Vue.js is a rapidly growing front-end framework for JavaScript, inspired by Angular.jsReactive.js, and Rivets.js that offers simplistic user-interface design, manipulation, and deep reactivity.

Vue.js allows you to simply bind your data models to the representation layer. It also allows you to easily reuse components throughout the application.

You don’t need to create special models or collections and to register events object in there. You don’t need to follow some special syntax. You don’t need to install any of never-ending dependencies. Your models are plain JavaScript objects. They are being bound to whatever you want in your Views (text, input text, classes, attributes, and so on), and it just works.

Vue.JS is described as a MVVM patterned framework, Model-View View-Model, which is based on the concept of two-way binding data to components and views. It is incredibly fast, exceeding speeds of other top-tier JS frameworks, and very user friendly for easy integration and prototyping.

Learning Objectives

In this hands-on course, you will learn:

  • What the MVVM architecture paradigm is and how it applies to Vue.js
  • What declarative Views are
  • What are Computed Properties
  • How to use conditional like v-if, v-else, and v-show in Vue.JS
  • How Vue.js explores defined properties, getters, and setters
  • How reactivity and data binding works in Vue.js
  • What dirty checking, DOM, and virtual DOM are
  • The main differences between Vue.js 1.0 and Vue.js 2.0
  • What reusable components are
  • What are Custom Filters and how to apply Two-way Filters
  • How Custom Components with v-model work
  • What are Custom Directives and how they work
  • How to install, start, run, and debug a Vue application
  • How to harness the power of dynamic components in Vue.JS
  • How to bind Data on a webpage in Vue.jS by exploring Text, Raw HTML, Attributes, and Filters examples

Topics and Subtopics

Here is the course outline:

1. Getting started with Vue.js

  • Example 1: “Hello, World!” Program
  • Example 2: Hello World in Vue 2
  • Handling User Input

2. Vue Components

  • Example 1: Component scoped (not global)
  • What are components and how to define components?
  •  Local registration of components
  • Inline registration
  • Data registration in components
  • Events

3. Computed Properties

  • Data vs Computed Properties
  • Computed properties vs watch
  • Computed Setters
  • Using computed setters for v-model

4. Conditional Rendering

  •  Syntax & Examples
  • v-if
  • v-else
  • v-show and v-if / v-else

5. Custom Components with v-model

  • v-model on a counter component

6. Custom Directives

  •  Syntax & Parameters & Examples

7. Custom Filters

  •  Syntax & Parameters & Examples
  • Two-way Filters

8. Data Binding

  • Example 1: Text
  • Example 2:  Raw HTML
  • Example 3: Attributes
  • Example 4: Filters

9. Dynamic Components

  • Example 1: Simple Dynamic Components
  • Example 2: Pages Navigation with keep-alive

Project- Shopping cart

  • Implementing a shopping list using jQuery
  • Implementing a shopping list using Vue.js
  • Analyzing data binding using developer tools
  • Bringing user input to the data with two-way binding
  • Rendering the list of items using the v-for directive
  • Check and uncheck shopping list items
  • Adding new shopping list items using the v-on directive


Basic knowledge of HTML and CSS as well as good knowledge of JavaScript.

Related Courses

Complete Training Bundle

If you are serious about learning web design and development, you should enroll in our Web Design and Development Training Bundle. This bundle covers all essential and practical topics related to web development. For $290 monthly subscription, you can have access to 300+ hours of hands-on project-based training covering all courses related to web development like JavaScript, PHP, JavaScript frameworks like React or Angular and many more. Click here to learn more.

Private Tutoring Classes

To take skills you learn from this course to the next level, taking the following tutoring classes are highly recommended. It is also a great opportunity to discuss your questions and problems related to this course with an experienced instructor:

What Is Next?

After finishing this course, you can enroll in any of following classes:

Recommended Free Courses

If you are new to the IT or programming, we suggest the following free courses:

Show More

What Will You Learn?

  • Learn new things
  • Revamp your career
  • Target IT jobs
  • Sharpen your skills
Free access this course


  • A laptop or PC
  • Good Internet
  • Routine Study
  • Regular Join Class