Introduction to Vue JS
Recently, many integrated JavaScript frameworks have emerged to make it easy for front-end programmers to create a website or applications (whether for mobile phones, the web, or computers), which were developed by developers from huge companies such as Facebook and Google. It consists of many ready-made components and allows the basic functions required to obtain the application, its methods and functions without the need to learn anything else, and it has its own architecture to control the elements of your application. The framework describes the software architecture and tells you how everything should be organized. It saves the programmer time and a lot of programming matters that he should take into consideration during the development process. One of those frameworks is Vue.Js, which has many advantages that make it particularly attractive and make it a favorite choice for huge numbers of developers, which we will discuss in this article.
- What is Vue.js?
- Main features of vue.js
- Main components of vue.js
- Create a mini project with vue.js
What is Vue.Js framework?
It is a framework built from the ground up to be progressively viable, based on the Model-view-viewModel architecture. The first release was in February 2014 by its founder Evan You who was working on the angular framework at google at the time. Where he wanted to extract the part that he liked from the angular and small size.
Main features of vue.js
● Ease to use
Vue.JS is easy to use as it can be easily added to your project by adding script. Programmers who are familiar with JavaScript are also easy to learn vue.js for its clarity, ease of understanding, and simplicity of installation.
<!-- development version, includes helpful console warnings --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!-- OR → <!-- production version, optimized for size and speed --> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
● Flexibility
Where you can use vue.js to create a small interactive project or integrate it into a previous project into a large web or mobile application, along with the use of other technologies.
● Small size
The library's core is characterized by its small size compared to other frameworks or libraries, which means faster loading of the website or application , less memory consumption and fewer bandwidth, its size, which is compressed (gzipped), does not exceed 30 KB, including Vue-router, Vue.js and Vuex.
● Rich Ecosystem and Versatility
Vue.js provides many useful libraries for developers, and most of them were developed by the same team as vue.js, so developers can ensure compatibility and consistency between these tools. For example, there is a ready-made UI Framework called Vuetify or a library for state management called Vuex and vue-routing for routing and mapping your single-page app states to respective URLs.
Main components of vue.js
Virtual DOM
Often, web developers give the DOM (Document Object Model) great importance to what it takes time to process it compared to other JavaScript processes. If we have 10 <li> elements in a web page and want to delete one element in most frameworks, you rebuild the list. All of them, the effects of this problem appear in the huge and complex applications made up of thousands of elements, so the concept of Virtual DOM came to solve this problem as it depends on building a virtual dom parallel to the real one. The Virtual DOM compares itself with its state before making the changes, so it defines the updates that it will perform at the level of the original DOM, that is, it only updates the elements that should happen. This process is called Diffing.
Dynamic HTML Templates
One of the basic components that vue.js offers is a template engine where you can write HTML-like templates that can be parsed by the browser so that the vue.js template engine reads it, converts it to a virtual dom, and then displays it to the user.
Data Binding and Reactivity System
Data in various HTML elements is displayed dynamically in modern web applications. Vue is equipped with its own interaction mechanism that automatically updates the user interface. This approach saves lots of time and extra lines of code that a developer can use to focus on offering other features and be more productive. Where vue.js relies on a two-Way Data Binding system, such as the angular framework, which allows the developer to easily link the html element to a variable, so every change to the <input> element is matched by a change in the variable's value in the code, and vice versa.
<div>
<input v-model="name"/>
<h1>{{name}}</h1>
</div>
Create a small project with vue.js
We will create a simple project that shows how to link and use the framework that displays the value of the count variable, and when pressing the increment button, it increases its value by one and displays it to the user. First we call the library into the html page using the <script> element. Then we write the template inside the <div> element and assign it id = app so that we can later link it to vue.js instance:
<div id="app">
<h1 class="text-center">Count: {{count}}</h1>
<button @click="increment()">increment</button>
</div>
Next we create a Vue instance and assign (el) as the id of the element that contains the dynamic html template. Then it links this template to the data object. This is a special object that hosts the reactive data we want Vue to present. In the model, the private tag {{}} indicates that this is part of the model dynamic, and its content should be searched in the Vue application data.
Next, in the methods object we define the functions we want to call in the dynamic model using linking them to the object with @ [event]:
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script >
const app= new Vue({
el:"#app",//The Element with id of app will be our vue container
data:()=>{
return {
count:0
}
},
methods:{
increment:function(){
this.count++;
}
}
});
</script>
Conclusion
Although vue.js does not receive as much support as other frameworks, it has achieved huge popularity in recent years for its simplicity and ease of learning over others. The framework vue.js is very large and what we did in this article is just a small introduction about it and how to integrate it into a small project, but in fact there are a lot of technologies or libraries associated with it or last frameworks built on it. Also, how can we build a single page SPA and PWA web application or a mobile application with Ionic Vue, I will explain it in the following topics.
Add new comment
