Vue.Js has been gaining a lot of attention since a couple of months. Vue.Js is a data-binding javascript framework that is specifically built for SPAs ie, Single Page Application.

The beauty of creating a SPA application is to provide a desktop like an experience in which the page remains the same throughout the application, no refresh, only the views being changed along with the URL. It’s much faster and smoother than conventional applications.

Vue is inspired by AngularJS. There are lots of similarities like Directives, Filters, Modules (here Components). As per VueJs FAQ:

“Vue.js is much simpler than Angular, both in terms of API and design. You can learn almost everything about it really fast and get productive.”

Let’s get started with our first app with VueJS.

First check skeleton of any VueJS app:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
// Initializing a new VueJS instance
new Vue({
 
  // Css selector id of parent div
  el: '#container',
 
  // initialize application specific data
  data: {},
 
  // these function will run when the application loads
  // Something like $(document).ready in jQuery
  ready: function() {},
 
  // Other methods we'll use throughout in the application
  methods: {}
});

In our very first example, we’ll take monthly salary from an input text and show yearly salary. Nothing fancy, but this is good way to get started.

Now grab latest Vue.js and add into your html. I am using CDN. For the sake of markup we’ll also use bootstrap css and here is our mark up:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="en">
<head>
    <title>Getting started with vue.js</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div class="container" id="container">
        <div class="row">
            <h2>CoderExample Vue.Js Example</h2>
            <div class="form-group">
                <label>Your monthly salary:</label>
                <input  type="number"  class="form-control"  placeholder="Enter your monthly salary..."  v-model="salary"  v-on="blur:showAlert" />
                <p class="help-block" v-if="salary">Your Annual salary:{{salary*12}}</p>
            </div>
        </div>
    </div><!--/#container-->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
    <script src="js/app.js"></script>
</body>

Let’s take a look at the app.js

01
02
03
04
05
06
07
08
09
10
11
12
13
14
new Vue({
    el: '#container',
    data: {
        salary: 1800,
    },
    ready: function() {
        console.log('Vuejs initialized with salary 1800');
    },
    methods: {
        showAlert: function() {
          alert("Your Annual salary: "+this.salary * 12);
        }
    }
});

The first thing you’ll notice that, After initializing a new VueJS component, we have targeted the div with an id of ‘container’. Then Also we have initialized a primary salary 1800.

On ready we can check through console.log(), anything within the ready function will run when the application loads.

In the markup we have an input text, where we are taking “salary”” through a directive called v-model. Directives are used to extend HTML.

And showing monthly salary with an expression {{ salary*12 }}.Expressions are written inside double braces like {{ expression}}. Expressions are used to bind application data to html.

But there is tweak, We are checking if there is anything in the v-model ‘salary’ then only we’ll show the data, for this purpose we have also ‘v-if’.

As you can see there is another directive v-on with a value of “blur: showAlert” on it. So these are the event. You can use click, keyup instead of blur.

In showAlert method, we’ve taking application data from salary model and showing the result in an alert.

VueJS has built in filter: json. So if you write like: {{data | json}} it will output that object as a string. It really helps in debugging in VueJS App.

As demonstrated above, the beauty of VueJS lies in making you write less code while maintaining integrity for your application.