A Thorough Introduction to Vue.js

Introduction

Vue.js, preferably referred to as Vue, is a trending open-source JavaScript progressive framework that is being widely used for building user interfaces and single-page applications. Vue is very popular among the developers community these days and is experiencing a huge amount of growth.

One reason for its growing popularity is that it features an incrementally adoptable architecture that focuses on component composition and declarative rendering. A significant range of advanced features including routing, state management and build tooling, required for complex applications, are offered via the supporting libraries and packages. These libraries and packages are maintained officially.

But before we understand Vue.js, let’s understand what a JavaScript front-end framework is and how important it is for developers.

What is JavaScript front-end framework?

A JavaScript framework like Vue, React, and Angular helps developers create modern applications. These modern JavaScript applications are mostly used on the Web, but also power a range of Mobile and Desktop applications.
Frameworks abstract the interaction with the browser and the Document Object Model (DOM). Instead of using low-level APIs offered by the browser to manipulate elements, and building complex systems to write an application, developers declaratively define and interact with them, at a higher level. Frameworks make life easier.

First big projects build upon Javascript were libraries like jQuery and Mootools. These were significantly popular for a while.

The first wave of modern JavaScript frameworks was Ember, Backbone, Knockout, and AngularJS.
jQuery, Ember and the other above mentioned projects are still being widely used, maintained, and many websites rely on them.

Then the second wave of frameworks was introduced which includes React, Angular, and Vue as the popular ones.

Why Vue.js is Different from other Framework

First, Vue.js is a progressive framework – meaning it adapts to the needs of developers.

Other JavaScript frameworks need complete buy-in from developers and require you to rewrite the existing application because of some specific set of conventions. While Vue.js has been designed to land inside your application with a simple script tag to start with.

Vue.js is being considered as the most approachable JavaScript front-end framework around. Some people even refer Vue as the new jQuery, as it easily gets in the apps via a script tag, and gradually obtains space from there. As per vuejs.org, Vue is

Approachable: If you are familiar with HTML, CSS and JavaScript, then you can start building things in no time.

Versatile: It’s an incrementally adoptable ecosystem that scales between a library and a feature-rich framework.

Performant: It’s tiny (~24KB), has Runtime Blazing Fast Virtual DOM and require Minimal Optimization Efforts

Features of Vue.js

Vue was born to be incrementally adoptable and has been designed accordingly. The core library of the framework is focused on the view layer only, and is quite easy for developers to pick up and integrate with other libraries or any specific existing projects. Moreover, when used in combination with modern tooling and supporting libraries, Vue is capable of powering complex Single-Page Applications. These key features enable Vue.js to position itself in the frameworks landscape.

Vue Templates

The Vue ecosystem uses an HTML-based template syntax that allows binding the rendered Document Object Model (DOM) to the underlying Vue instance’s data. These templates can be parsed by HTML parsers and spec-compliant browsers. Vue compiles the templates into virtual DOM render functions.

Any HTML is a valid Vue.js template. In addition to that, it provides two powerful things: directives and interpolation.

Below is a valid Vue.js template:

<span>Hello!</span>

This template can be put inside a Vue component declared explicitly:

new Vue({

  template: '<span>Hello!</span>'

})

or it can be put into a Single File Component:

<template>

  <span>Hello!</span>

</template>

This example is very basic.

In the next step, we will be making it output a piece of the component state such as a name.

This can be done using interpolation. First, we add some data to our component:

new Vue({

  data: {

    name: 'Nina'

  },

  template: '<span>Hello!</span>'

})

Then, using the double brackets syntax, we can add it to the template as shown below:

new Vue({

  data: {

    name: 'Nina'

  },

  template: '<span>Hello {{name}}!</span>'

})

Did you notice that we just used name instead of this.data.name? It’s because Vue does internal binding and allows the template to use the property as if it was local. In a single file component, it will be:

<template>

  <span>Hello {{name}}!</span>

</template>

<script>

export default {

  data() {

    return {

      name: 'Nina'

    }

  }

}

</script>

Vue Reactivity System

Another key feature of the Vue.js is a reactivity system that uses simple JavaScript objects and optimized re-rendering. During its render, each component keeps track of its reactive dependencies, so that the system knows exactly which components need re-render and when to re-render.

Vue Components

Extending basic HTML elements, Vue.js components encapsulate reusable code. Vue components are custom elements to which the Vue’s compiler attaches behavior at a higher level. In Vue, a component is basically a Vue instance with pre-defined options.

Below is an example of Vue component. The component presents a button and prints the number of times the button is clicked:

<div id="tuto">

            <buttonclicked v-bind:initial_count="0"></buttonclicked>

</div>

<script>

Vue.component('buttonclicked', {

  props: ["initial_count"],

  data: function() {return {"count": 0} } ,

  template: '<button v-on:click="onclick">Clicked {{ count }} times</button>',

  methods: {

    "onclick": function() {

        this.count = this.count + 1;

    }

  },

  mounted: function() {

    this.count = this.initial_count;

  }

});

 

new Vue({

  el: '#tuto',

});

</script>

Vue Routing to handle URLs

In a JavaScript web application, a router syncs the currently displayed view with the browser address bar content. Meaning, a router makes the URL change when you click something in the page – helping you show the right view when you click a certain URL.
We all know that the Web is built around URLs. Hitting any specific URL, displays the specific page. With the introduction of applications that run inside the browser and change what the user sees, many apps broke this interaction, and developers had to manually update the URL with the browser’s History API.
A router is required to sync URLs to views in your application. It’s common requirement, and all the major modern frameworks allow you to manage routing.

For the Vue.js applications, the Vue Router library is the key. As a developer, you can use whatever generic routing library you require, or can also create your own History API integration. However, the benefit of using Vue Router is that it’s Vue official – meaning developers will consistent integration in the fr Vue Router is available via npm with the package named vue-router.

If you use Vue via a script tag, you can include Vue Router using

<script src="https://unpkg.com/vue-router"></script>

If you use the Vue CLI, you can install it using:

npm install vue-router

Once the vue-router is installed, you can now import it in your app.

You import it after vue, and you call Vue.use(VueRouter) to install it inside the app:

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

After you call Vue.use() passing the router object, in any component you have access to these objects:

this.$router is the router object

this.$route is the current route object

Transitions

Vue provides numerous solutions to apply transition effects when items are updated, inserted, or removed from the DOM. This includes tools to:

• automatically apply classes for CSS transitions and animations
• use JavaScript to directly manipulate the DOM during transition hooks
• integrate third-party CSS animation libraries, such as Animate.css
• integrate third-party JavaScript animation libraries, such as Velocity.js

When an element wrapped in a transition component is removed or inserted, following happens:

1. Vue.js will automatically detect whether the target element has CSS transitions or animations applied. If it does, CSS transition classes will be inserted/removed at right timings.
2. If the transition component has JavaScript hooks, these hooks will be called at right timings.
3. If no animations or CSS transitions are determined and also no JavaScript hooks are provided, the DOM operations for removal and/or insertion will be executed straightaway on next frame.

Support Libraries of Vue (Source: vuejs.org)

• Vue-router: Vue Router is the official router for Vue.js. The router integrates with Vue.js core to make building Single Page Applications with Vue.js easy.
• Vuex: Vuex is a state management pattern + library for Vue.js apps. It serves as a centralized store for all the components in an app
• Vue-loader: Vue-loader is a loader for webpack that lets you author Vue components in a format called Single-File Components (SFCs)
• Vueify?: Vueify is a browserify transform that allows you build single file Vue.js components with browserify
• Vue-cli: Vue provides an official CLI for quickly scaffolding ambitious Single Page Applications.

Hello Vue: the most basic example of using Vue

Now that you know the basics of Vue.js, let’s get started with the coding. Here’s a “Hello Vue” to help you land on the right foot.

<html>

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

<body>

 

<div id="app">

  <h1>{{ message }}</h1>

</div>

 

<script>

var myObject = new Vue({

  el: '#app',

  data: {message: 'Hello Vue!'}

})

</script>

 

</body>

</html>

 

Ready for More?

Vue.js was built by blending the best ideas of most-used frameworks like React, Angular and Knockout, and by cherry-picking the best choices those frameworks made.

If you want to build an application with Vue.js, get in touch with our team. We will help you build the best application for you and your business.

Source: vuejs.org, medium.freecodecamp.org