Getting Started with Vue.js: Lesson 11 of 25

Vue Events: Build a Counter

Up Next

Vue Events: Building a Crazy Button

Autoplaying in 7 seconds!

Cancel

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:

Table of Contents

    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.

    Chris Sevilleja

    173 posts

    Founder of Scotch.io. Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.