What is Vue, How does it work ?

VueJS is a small and very successful javascript library used in developing user interfaces. The fact that it does not require you to build projects on it and the freedom to integrate it only on the pages needed makes VueJS one step ahead.

What does VueJS bring you?

You can use variables in html using VueJS. In this way, you can see the output of your javascript variables on your html page.

VueJS provides two-way binding. What does this do? Imagine that you are making a form, when you enter the page, you will need the data in your database to be filled in the form, and when there is a change in the form, you will need these changes to be updated in the database.

Let our page be the profile page;

We request the user information from the server with Ajax, we assign the incoming data to the user object under VueJS. Now we can see the user information in the Developer Tools section of our browser thanks to ‘chrome vue js devtools’.

What we need to do to fill the incoming data into the form is to associate the data with the relevant form elements. We do this with the v-model attribute.

Sample: <input type=”email” name=”email” v-model=”user.email”>

Now when we make a change in this input, the user.email information under VueJS will be updated simultaneously. You will not need to read data from the form to update the data in the database because the current data will already exist in VueJs. All you need to do is to send the user object to the server with ajax again.

An example of bidirectional data flow can be done as follows; We can show the data that the user enters in the form item simultaneously in a div. For this you need to do.

<div>Welcome {{user.firstname}} {{user.lastname}}</div>
<input type=”text” name=”firstname” v-model=”user.firstname”> 
<input type=”text” name=”lastname” v-model=”user.lastname”>

How can we install VueJs? Add the following VueJS script to your project.

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Then come to your HTML page and add the following code.

<div id="app"> Hello {{ fullname }}, Welcome to the VueJS world.</div>

Add the following code to your Javascript file.

var app = new Vue({ el: '#app', data: { fullname: 'Birol Apaydın' } })

Congratulations, you have made your first VueJS work. For more, you can visit https://vuejs.org/v2/guide/

Why VueJS ?

Small size : VueJs file size is between 18-21kb. Thanks to its low file size, it is easily downloaded by the browser and does not reduce the site loading speed.

Integrated flexibility : You can integrate the VueJS script only on pages where you want to use VueJS.

Virtual Dom structure : Changes made in the project do not directly update the dom, the necessary changes are made to the copy of the dom in memory and then the difference is applied to the real dom.

Two-way binding : It provides bidirectional data flow from variable to form elements and from form element to variable.

Vue.js DevTools plugin for VueJs

Thanks to the Chrome Vue.js DevTools we can see components and data in the Developer Tools section of our browser.
For VueJS documentation, visit https://vuejs.org/v2/guide/