What is Vue.js?

Vue (pronounced “view”) is a JavaScript framework created for building user interfaces. Vue was officially released in 2014 by Evan You, a Google employee. Vue is developed for desktop and mobile applications with an Electron framework. Electron framework is used to build cross-platform desktop apps. Evan You said he created Vue to capture the best of Angular while building a custom tool that was lighter weight: “For me, Angular offered something cool which is data binding and a data driven way of dealing with a DOM, so you don’t have to touch the DOM yourself.” The name Vue refers to the Model-View-Controller (MVC) architecture. Vue focuses on the UI of an app/website.

Declaratively Render Data

Html file

<div id="app">
 {{ message }}
</div>

Js file

var app = new Vue({
 el: '#app',
 data: {
   message: 'Vue application to the rescue!'
 }
});

A new Vue application has been created, the data and the DOM are linked and everything on the page is now reactive. The Vue app attaches itself to a DOM element (#App) and then controls it. The entry point is the HTML, but everything actually happens

Binding Data

Html file

<div id="app-2">
 <span v-bind:title="message">
   Hover your mouse over me
   to see the title dynamically change!!
 </span>
</div>

Js file

var app2 = new Vue({
 el: '#app-2',
 data: {
   message: 'You hovered and loaded the page on ' + new Date().toLocaleString()
 }
});

Here is our first introduction to directives. The v-bind attribute is called a directive, indicating that they are special attributes crafted by Vue. The v-bind applies a special reactive behavior to the rendered DOM. If you open your console and enter app2.message = ‘we’ve got a new message.’ The bound HTML title attribute will be updated.

Toggle Data

Html file

<div id="app-3">
 <span v-if="seen">Do you see the muffin man? YES</span>
</div>

Js file

var app3 = new Vue({
 el: '#app-3',
 data: {
   seen: true
 }
});

If you enter javascript app3.seen = false; in the console, the message disappears. This shows that data can be bound to attributes and text, but in general, data can be bound to the structure of the DOM.

Vue also has a great transition effect system. Below is code showing a single transitioning element. Vue specifies a transition wrapper component, which allows you to add entering/leaving transitions for elements and components. V-if is used for conditional rendering and v-show is used for conditional display.

Html file

<div id="effects">
 <button v-on:click="show = !show">
   Toggle
 </button>
 <transition name="fade">
   <p v-if="show">MostValuableProgrammers</p>
 </transition>
</div>

Js file

new Vue({
 el: '#effects',
 data: {
   show: true
 }
});

CSS file

.fade-enter-active, .fade-leave-active {
 transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
 opacity: 0;
}

V-enter-active is the active state for enter. It is applied during the entire entering phase. This class defines the duration, delay and easing curve for the entire transition. V-leave-active is the active state for leave. It is applied during the entire leaving phase. V-enter is the starting state for enter whole v-leave-to is the ending state for leave (only available in versions 2.1.8+).

Positives of using Vue

• Vue’s small size (entire framework is 18 KB) makes the library fast to download and install
• Uses the virtual DOM to render elements, which speeds up performance. Normally when a user interacts with a page, the whole DOM is updated. Vue instead uses virtual DOM (essentially a copy of an original DOM that “figures out what elements to update, without rendering the whole DOM.” This method improves application performance by making elements render to the page faster.
• Two-way data binding, a feature inherited by Vue from Angular is a great benefit. Two-way data binding refers to the link between model data updates and the view (UI). It is now simpler to update and track related components.
• Single-file components allow for component reusability, increased code readability and in turn better unit-testing.
• Vue is easily integrated with existing applications due to its singular reliance on JavaScript.
• With the release of Vue CLI 3, it maintains a great set of tools, like Vue’s browser debugging tools, server renderer, state manager, and the many unit-testing/testing tools
• Vue is easy to learn, especially with the clear and concise documentation provided and there’s a growing Vue community (over 41 thousand Stack Overflow tags

Negatives of using Vue

• The reactivity in Vue is complex. Sometimes components do not react correctly when a user triggers the component and mistakes are made during data reading. Data must be flattened in order for reactivity to be fixed. *Because Vue is popular with businesses like Alibaba and Xiaomi, when searching for Vue content, instructions and descriptions may be written in a language other than English.
• There is a lack of support for larger projects because the framework is so new. In order for the framework to be adopted in large-scale projects, the tech needs to be strongly supported and have stability so that issues can be swiftly resolved.
• Limited resources (in terms of plugins available) and a lack of experienced developers are areas where Vue can improve greatly

Conclusion

Vue is a fairly new framework that should be learned for its ease of use with building user interfaces. Vue may not be as widespread, like Facebook(React) and Google(Angular), companies with huge financial support. Vue still has a good following on Github and with other larger companies, like Alibaba and BMW. Vue has good documentation filled with a plethora of information. It is easy to learn and has a nice, supportive community that can aid you in learning it.

Sources

AltexSoft. (2020, February 27). The good and the bad of vue.js framework programming. Retrieved February 28, 2021, from https://www.altexsoft.com/blog/engineering/pros-and-cons-of-vue-js/
Vue. (n.d.). Introduction - vue.js. Retrieved February 28, 2021, from https://vuejs.org/v2/guide/