Vue JS Basic Guide for Beginners

 VueJS Basic Guide for Beginners

• VueJS is a open source progressive JavaScript framework which is used to develop interactive web interfaces.
• Focus more on view part, which is the front end.
• Easy to integrate with other projects and libraries.

Vuejs prerequisites

• HTML
• CSS
• Basic JavaScript

A beginner can take CDN library of VueJS and start work as follows

VueJS Introduction

Above picture will describe how a Vue object works in a easy way rather explaining in word.

Another Example to understand more,

Example 2

Methods

• Methods are functions that muted state and trigger updates. 
• They can be bound as event listeners in for elements

Vue Methods used here

In above picture you can see methods Object which contains two functions, increase which add 1 to the count variable and decrease which substract 1 from count variable. 

Check how the functions are called in buttons element when clicked.

Note: Do not use button element inside form element.

V-Model

v-model is used for binding from elements like inputs, radio buttons, textarea, checkboxes, etc...

v-model used

V-if and V-else

v-if used

v-else used

V-for

v-for used

These are some Vue-directives I shared here. there are more directives like this.

Hope you would understood how vue work and how to use directives in Vue and remember practice only make you more understandable one. So Practice as much as you can.

You can reach me by,

WhatsApp: click to chat in WhatsApp

Twitter:      click here

Thank You