I’m not an expert in javascript frameworks or in client-side development in general. But often I do need to create an interactive web UI, and do it fast.

There are countless frameworks today and after considering some options I decided to commit to Vue.js.

Read on to see why.

Vue is very Easy to Get Started With

I find it similar to knockout.js in this regard. A couple of lines of code is enough to do basic things.

There are no build tools to install, no javascipt preprocessing of any kind. You can add Vue to any existing page in seconds.

For example, you can do this:

Step 1

Reference the Vue script on your page. Then add a root div for the app:

 <div id="root">{{message}}</div>
 <script src="https://unpkg.com/vue@2.2.6"></script>

Step 2

Create a Vue app instance:

<script>
var app = new Vue({
    el:'#root',
    data:{
        message:"hello world"
    }
});
</script>

Step 3

There’s no step 3, actually. Just open the page and observe your “Hello World”.

Now open development tools and type this in the console:

app.message = "foo";

This should update the view. I don’t think data binding can be any easier than this.

Vue’s View Model Looks Like a Regular Object

The data property we have seen earlier references the View Model.

It’s a regular javascript object and it can be changed by any javascript code that has it in scope.

There are no observables, controllers or anything like that.

With Vue Everything Just Works

It’s amazing how the features Vue provides have been designed and named properly. Everything is so easy to use and behaves just how I expect it to.

Just look at some examples.

Event Handling

Lets create a button that will increment a counter:

<div id="root">
    <button v-on:click="increment">click me</button>
    You've clicked {{counter}} times.
</div>
 var app = new Vue({
    el:'#root',
    data:{
        counter:0
    },
    methods:{
        increment: function(){
            this.counter= this.counter + 1;
        }
    }
});

So we define a method called increment and bind it to click. Easy.

Expressions in Templates

I know this feature shouldn’t be overused, but sometimes it’s really convenient to define inline expressions:

<div id="root">
    the sum of {{a}} and {{b}} is {{a+b}}
</div>
 var app = new Vue({
    el:'#root',
    data:{
        a:1,
        b:2
    }
});

If either a or b changes, the view will be re-rendered.

Computed Properties

For most of the computations we still want to avoid putting them in templates. With Vue this is also as easy as it gets.

<div id="root">
    the sum of {{a}} and {{b}} is {{sum}}
</div>
 var app = new Vue({
    el:'#root',
    data:{
        a:1,
        b:2
    },
    computed: function(){
        return this.a + this.b;
    }
});

Components

It’s so easy to create components in Vue that I actually want to do it more:

<div id="root">
    <greeting v-bind:name="name"/>
</div>

 Vue.component('greeting', {
      props:["name"],
      template: '<div>Hello {{name}}</div>'
})

 var app = new Vue({
    el:'#root',
    data:{
        name:"Andrei"
    },
});

Summary - What Vue is Good For

After working with Vue for a bit, I can say that it’s definitely a good choice for someone who wants to:

  • Spend less time learning libraries
  • Build interactive UI’s and prototypes rapidly
  • Be able to understand the code a couple of weeks later