Vue JS Make Developer Life Easier

Difficulty Level: Beginner

Prerequisite: You should be familiar with HTML, CSS, and Javascript.

Takeaway: This article provides high-level overview on Vue.js and how important it is in a frontend ecosystem.

Before delving into what Vue.js can do for you, let's discuss more on why we need Vue.js

We all want to take care of our users and provide them with the best possible user experience(UX), nowadays companies are preferring modern frontend frameworks like Vue.js, React.js, Ember.js, Angular.js, Backbone.js… etc. Why not, native HTML, CSS, and Javascript can do it too.

Nowadays web applications are developed with more interactive features and are very dynamic in nature. Web applications are provided with excellent user experiences by loading the data dynamically into applications without reloading the application, interacting with the end user, making asynchronous executions to run multiple things in parallel, processing bulk actions in background without interrupting the user and many more. All these can be done with the help of lots of javascript.

When the application grows bigger and bigger, too many javascript files will come into the picture. That's why we need a standard framework which generalizes most of the common web application use cases and organizes the project files. Here comes one of the popular frontend frameworks: Vue.js

Let's have a look at how web applications are built with Vue.

Using Vue, the web page is designed by splitting into vue components, each component is an independent and reusable piece in the web page. This way we can develop the application lean with less code or no code duplication,making the code easy for the development team to understand. The Vue component is developed in a dedicated file using the .vue extension - known as a Single-File Component (SFC for short). It contains HTML, CSS, and Javascript.

Example of Vue component:

A Vue single file component is a self-contained piece of user interface which has its own HTML markup, scripts for interactivity and styles for presentation.

HTML:

HTML section is where you add the template of the web page, data property and computed property which are defined in script section is used to render dynamic content of the web page

CSS:

Style section allows you to define your component styles using CSS, LESS, SCSS pre-processors etc.

Javascript:

In the script section, you can define any local data, props, computed properties, watchers, methods, Vue lifecycle hooks along with the registration of any child component as needed.

The above example is a very simple vue application with a dynamic message rendered in UI, there are more options available in vue, which will cover in upcoming articles.

What is Vue.js?

A Progressive framework for developing user interfaces and advanced single-page applications.
The core library is focused on the view layer only
It's easy to pick and integrate with other libraries.
Vue.js lets you extend HTML with HTML attributes called directives
It provides built-in directives and user-defined directives.
Vue.js uses double braces {{ }} as a placeholder for data.
Vue.js directives are HTML directives with the prefix v-

Why Vue.js?

Most of the necessary features in frontend development can be found in the Vue.js ecosystem
It builds on top of standard HTML, CSS and Javascript and provides a declarative and component-based programming model
Very simple API
Allow to use of selective modules
Consistently adaptable
Easy to integrate with other libraries or existing projects
Updates model and view via two-way binding
Good for large scale application
It is a popular framework loved and used by many professional engineers
It is easier to get started with compared to react
Its ecosystem is large and robust
You can use Vue to enhance existing HTML

Features in Vue.js

Assign values to HTML attributes, change the style, assign classes with the help of binding directive called v-bind
Helps create custom elements which can be reused in HTML.
V-on is the attribute added to the DOM elements to listen to the events in VueJS
Provides various ways to apply a transition to HTML elements when they are added/updated or removed from the DOM
Helps to listen to the changes made to the UI elements and performs the necessary calculations. There is no need for additional coding for this.
Watcher takes care of handling any data changes making the code simple and fast
Navigation between pages is performed with the help of vue-router
Lightweight and performance is also very fast
A part of the application can be developed progressively using Vue.js. That is the major takeaway of adopting Vue into many legacy applications

Conclusion:

Building interactive user interfaces with Vue is a lot of fun. It requires very little to no setup at all!! It is beginner friendly enough to get you started in no time and yet sophisticated, extensible and capable enough to let you build world-class apps.

Vue has extensive documentation on how to use different features of the framework and the core team members are doing an excellent job in evolving the framework and wrote detailed guides for advanced use cases as well.

In this article, we have barely touched the surface of component-based design, however, I hope you had a good overview of the different parts of Vue component.

You need a help building a web application? Drop us a line here.

Written by:

Chandra Sekar

Senior Frontend Developer

Chandra is an exceptional Vue.js frontend developer who consistently delivers outstanding results. With a keen eye for detail and a deep understanding of Vue.js, Chandra transforms design concepts into seamless and visually captivating user interfaces.