What is Vue.js?

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

Introduction

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.

Prerequisites

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.

Directives

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,

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

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.

Conclusion

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.