What is Vue.js?

Last updated on December 11, 2022 by Ayaz Ali Shah

In this article we will be covering Vue.js brief introduction and also its directive and two-way binding.

Table of Content

  • Introduction
  • Prerequisites
  • Directives
  • Two-way Binding


Vue.js is an open-source and progressive JavaScript framework that helps to create modern web interfaces. It has a few libraries that provide ease in creating complex and simple features. Vue.js is also best for single-page applications (SPA). It builds the front end and deals with HTML CSS and JavaScript.

Vue.js first version was released in February 2014. It is created by Google’s ex-employee Evan You.


As we learned above Vue.js is a JavaScript framework, which means it interacts with HTML, CSS, and JavaScript. So before learning Vue.js it is necessary for you to learn HTML, CSS, and JavaScript, in case you don’t know.


Vue.js provides predefined directives (v-show, v-for, v-if). We add directives in the element in the same as attributes.  These directives help developers in data manipulation. For example, if you need a loop for a list you can iterate a loop over the list element. Below is an example,

    <li v-for="items in category" :key="items">items</li>

In the above example, directive v-for iterates over each item in the array.

Two-way Binding

In Vue.js, the v-model directive binds a value to the HTML element in the web interface.

 <p>{{ message }}</p>
 <p><input v-model="message"></p>

In the above example, we bind the message value with a paragraph. When the user starts typing in the input field the message variable will show the letters in the paragraph. Because {{message}} gets data from v-model and shows it in paragraph. It works at run-time.


In this article, we introduced Vue.js and its directives and two-way binding with examples. If you would like to learn more, checkout our Vue.js Page.

Share on:

Related Posts