Vue.js is a rapidly growing front-end framework for JavaScript, inspired by Angular.js, Reactive.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



Requirements

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:


Course Curriculum

  1. Intro to Vue.JS
Available in days
days after you enroll
  2. Vue Components
Available in days
days after you enroll
  3. Computed Properties
Available in days
days after you enroll
  4. Conditional Rendering
Available in days
days after you enroll
  5. Custom Components with v-model
Available in days
days after you enroll
  6. Custom Directives
Available in days
days after you enroll
  7. Custom Filters
Available in days
days after you enroll
  8. Data Binding
Available in days
days after you enroll
  9. Dynamic Components
Available in days
days after you enroll
  Project- Shopping cart
Available in days
days after you enroll

Select a pricing plan and sign up