Exploring Vue.js (from a jQuery user’s perspective)

Our next few articles will be on a relatively new Javascript framework called Vue.js aka Vue. I’ve just started using it on a project and I’m really enjoying what it can do!

Why Vue?

There’s always another new framework to learn, is Vue worth bothering with? What use case does it have and what niche does it fill?

If I was going to build a large web app, I might use something like Ember or Angular which provide models, routes, controllers, components etc. But what if I’m building something which doesn’t need the bloat and setup of a full JS framework, like a dynamic form?

The go-to library then would be jQuery. jQuery may be a fine choice, but Vue has a lot of strengths where jQuery does not. For example, Vue can easily keep your Javascript data and the DOM in sync. More on this later.

What’s more, Vue is just as easy as jQuery to include in your project and just as quick to learn and use.

In this series of articles I’ll demonstrate some basic features of Vue and compare how you would achieve something similar with jQuery.

Using Vue

You can add Vue to your project simply by including the script, it doesn’t need compilation etc.

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js'>

You then instantiate Vue and pass a CSS selector as an argument to show Vue where to “anchor” in the DOM e.g.

<div id='#app'></div>
<script>
  new Vue({
    el: '#app'
  });
</script>

Data binding

The main feature of view is its “reactive data-binding system” which makes it extremely simple to keep your data and the DOM in sync.

For example, say we had a variable called message which we assign a string value to, and want change from time to time. We want to print this variable on our page as well.

Using jQuery, you’d have to manually update the DOM each time the variable’s value changed e.g.

<div id='example'>
  <div id='message'></div>
</div>
<script>
var $message = $('#message');
$message.html('Hello world!');
// When you want to change the message…
$message.html('Goodbye world.');
</script>

In Vue, you don’t have to worry about updating the DOM. You just change the value of the variable and Vue will take care of it.

<div id='#app'>
  {{message}}
</div>
<script>
  var data = {
    message: 'Hello world!'
  };
  new Vue({
    el: '#app',
    data: data
  });
  
  // When you want to change the message…
  data.message = 'Goodbye world.';
</script>

So what’s so great about that? The problem with directly manipulating the DOM with jQuery is that it becomes increasingly difficult to manage. It’s fine when you have one element to update, but what happens when it’s 50 elements? You have problems where updating one node affects other nodes. It becomes a nightmare to keep track of and unexpected things start happening.

Plus you there’s the inefficiency of continually iterating the DOM.

I go through a more detailed example of data binding in this video:

Get the latest Vue.js articles, tutorials and cool projects in your inbox with the Vue.js Developers Newsletter.