What is Vue.js?

Last updated on December 11, 2022

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.

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

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.

Written by

Ayaz Ali Shah

I am a skilled full-stack developer with extensive experience in creating and deploying large and small-scale applications. My expertise spans front-end and back-end technologies, along with database management and server-side programming.

Share on: