Skip to content

Vue.js

!vue logo

What is Vue.js

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

The installation for VueJS is very easy to start with. Any developer can easily understand and build interactive web interfaces in a matter of time. VueJS is created by Evan You, an ex-employee from Google. The first version of VueJS was released in Feb 2014.

Facts

  • Been around since 2013
  • Unlike React and Angular, Vue is not directly supported by a major company
  • Similar to React in many respects, but also has things in common with AngularJS — for example, directives and templates

Pros

  • Easy to learn
  • Good documentation
  • Surging in popularity and usage
  • Best performance of top three frameworks
  • One advantage is, for someone who has only used plain html, css, javascript before, Vue doesn't throw any extra things for him to learn (there are things to learn though but he can still read Vue code without any prior knowledge)

Cons

  • Current job market is less than that for React and Angular
  • Not directly supported by a major company

Core concepts

Reactive Data Binding

At the core of Vue.js is a reactive data-binding system that makes it extremely simple to keep your data and the DOM in sync. When using jQuery to manually manipulate the DOM, the code we write is often imperative, repetitive and error-prone. Vue.js embraces the concept of data-driven view. In plain words, it means we use special syntax in our normal HTML templates to “bind” the DOM to the underlying data.

Once the bindings are created, the DOM will then be kept in sync with the data. Whenever you modify the data, the DOM updates accordingly. As a result, most of our application logic is now directly manipulating data, rather than messing around with DOM updates. This makes our code easier to write, easier to reason about and easier to maintain.

Component System

The Component System is another important concept in Vue.js, because it’s an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components.

!treeview

In fact, a typical large application built with Vue.js would form a tree of components. Here’s an example of what an app’s template would look like with components:

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

The component system is the foundation for building large apps with Vue.js. In addition, the Vue.js ecosystem also provides advanced tooling and various supporting libraries that can be put together to create a more “framework” like system.

This is how a Vue component can look like:

<template>
    <div>{{msg}}</div>
</template>
<script>
export default{
    data(){
        return {
            msg: 'Hi I came from JavaScript'
        }
    },
    mounted(){
        setTimeout(() => this.msg = 'I came 3 seconds after', 3000)
    }
}
</script>
<style scoped>
/* I will only be applied over HTML above, since I have optional 'scoped' attribute */
div{color:red}
</style>

Hello World example

The easiest way to try out Vue.js is using the Hello World example

<div id="app">
  {{ greeting }}
</div>
new Vue({
  el: '#app',
  data: {
    greeting: 'Hi there! Checkout the Vue!'
  }
})

Test it out

Try out the online template

You might also be interested in the Vue starter template on StackBlitz: https://stackblitz.com/edit/vuejs-starter

Read more