Getting Started with Vue.js

Vue Events: Build a Counter

In this lesson we'll build a counter with Vue. This is a simple enough example but it is a clean and straight to the point one. We can easily see how the flow of Vue applications works:

  • Define variables in our data
  • Show those variables in our template with interpolation ({{ }}) or directives
  • Listen for events
  • Update the data
  • The template updates itself (reactive!)

Starting HTML

We will first create our HTML:

<div id="app" class="box content has-text-centered">
    <!-- show the count here -->
    <h2 class="title is-1">{{ count }}</h2>
</div>

Our Vue Instance

We'll start with a simple Vue instance where we can create that count variable:

const app = new Vue({
    el: '#app',
    data: {
        count: 0,
    }
});

At this point our application will just be able to show the number 0.

Adding the Increment Button

Next up we'll need a button that we can click to increment our button.

<div id="app" class="box content has-text-centered">
    <!-- show the count here -->
    <h2 class="title is-1">{{ count }}</h2>

    <!-- create the button that will increment the count -->
    <a class="button is-danger" @click.prevent="incrementCounter">Count Up</a>

</div>

Now we can see our button exists but it won't be able to do anything since we haven't defined the incrementCounter method just yet. We can see that Vue is waiting for the click event though thanks to that @click syntax.

Adding the Increment Method

The last step is to add the incrementCounter method to our methods in the Vue instance.

const app = new Vue({
    el: '#app',
    data: {
        count: 0,
    },
    methods: {
        incrementCounter: function() {
            this.count += 1;
        }
    }
});

Now our application will be able to update the counter!

Compare to Plain JavaScript

Let's compare this simple Vue example to vanilla JavaScript. There's a few steps we have to handle ourselves that Vue was already taking care of:

  • grabbing our DOM elements
  • adding our event listeners
  • updating the DOM with new data
// create our data variables
let count                       = 0;
const countPosition      = document.querySelector('h2.title');
const incrementButton = document.querySelector('.button');

// update the html to show the default number
countPosition.innerText = count;

// listen for the click event and increment our counter
incrementButton.addEventListener('click', incrementCounter);
function incrementCounter(e) {
    e.preventDefault();
    count += 1;
    countPosition.innerText = count;
}

Notice the Vue syntax is far more organized and will scale better if we ever bring in multiple counters.