Recently I started using Vue and I don't think I ever want to go back. Using a data driven approach when creating interactive components in sites has made developing projects faster, easier to understand and far more maintainable.

Consider the following simple example to see how Vue can simplify your code and way of thinking. In our example. we will display a simple list of items, this can be anything, blog posts, tweets, people etc.

With jQuery, a typical example might look something like:

HTML

<input type="text" class="js-filter">
<ul class="js-posts"></ul>

JS

var people = ['Tom', 'Dick', 'Harry'];

// Remove any items that might already exist
$('.js-posts').empty();

// Add the items to the DOM
$.each(people, function(index, person) {
    $('.js-posts').append("<li>"+ person +"</li>");
});

// Listen to when the input changes
$('.js-filter').on('keyup', function() {
	// Get the search value
  	var value = $(this).val();

  	// Hide all posts
  	$('.js-posts li').hide();

  	// Only show the posts that match
  	$('.js-posts li').filter(':contains("'+value+'")').show();
});

Whilst this example uses fairly simple jQuery, it's not the easiest to maintain or modify. The state is purely managed by what exists in the DOM. When this is combined with styling, and other display logic, the state of the data becomes very unclear, and things start to become messy.

Now lets look at the same example, rewritten using Vue.

HTML

<div id="app">
  <input type="text" v-model="filter">
  <ul>
    <li v-for="person in people | filterBy filter">{% raw %}{{ person }}{% endraw %}</li>
  </ul>
</div>

JS

new Vue({
  el: '#app',
  data: {
    filter: '',
    people: [
      'Tom', 'Dick', 'Harry'
    ]
  }
});

It's clear from a quick glance that the code is much simpler, and there is far less of it.

In the template, the input element is bound to the filter property within the data. Whenever the data changes, the text is automatically updated in the input box.

If our application does anything that affects the people array, the updated data will automatically trigger a re-render of the template without any additional effort. The important thing to note here though, is that only the data that needs to change will be re-rendered on the page. If you have 100 elements in an array, and only 1 changes, only 1 DOM element needs to be re-painted. This makes apps very efficient, especially on mobile devices.

The above examples don't even scratch the surface of what Vue.JS is capable of. The beauty of Vue is that it can be used for a single, simple tool within a larger application, yet it can scale up all the way to be used for entire JS applications. Other alternatives like React and Angular require a lot more setup and boilerplate code, which can make them too cumbersome for simple tools.

The official docs are a great place to learn, however I would definitely recommend this free video series from Laracasts - Learning Vue 1.0: Step By Step.

The next time you find yourself reaching for something jQuery, give Vue.js a try instead, it's worth taking the little time to grasp the basics, and you won't regret it.