How to make a simple incremental, decremental, and Reset Counter App with Vue.js for a beginner

Gloria Ngbea — Sun, 25 Feb 2024 21:27:52 +0000

Dear Readers,

Welcome! In this guide, I'll walk you through the process of creating a counter app using Vue.js. Whether you're new to web development or looking to expand your skills, this project is designed to be beginner-friendly.

Lets get into it

Prerequisites and Dependencies:

Before we begin, make sure you have a basic understanding of JavaScript. Familiarity with concepts like variables, functions, and event handling will be helpful. Vue.js is a progressive JavaScript framework that makes building user interfaces straightforward and efficient.

To get started, we'll use a Content Delivery Network (CDN) to host Vue.js. A CDN delivers files like JavaScript libraries quickly to users around the world. You can find the necessary script tag by visiting

Step-by-step installation instructions

Visit vuejs.org and navigate to Using Vue from CDN.
Copy the provided script tag.
Create a folder for your counter app project and paste the script tag into the head section of your HTML file.

NOTE: Placing the script tag in the head tag ensures optimal loading priority and parsing efficiency.
Create a root element <div class="app"></div> in your HTML file.

Note: The convention of naming the root div "app" is commonly used in Vue.js projects created with tools like Vue CLI, but it's not a strict requirement. You can name it anything you like, and you can also use a class instead of an id. Whatever name or selector you give to the root element is what you'll use to mount your Vue instance..

Let's delve into building the counter app itself..

Create an external JavaScript file and ensure you have a <script> tag within the HTML <head> or <body> section to link to that JavaScript file. Once that is done go to the external JavaScript file and create a Vue instance by using this block of code Vue.createApp() is a method provided by Vue.js that initializes and creates a Vue application instance
followed by data() { return{ } } The data() method is part of the Vue instance options. It is used to define the initial state of the data properties for your Vue application. Typically, you would define your application's initial data properties within this method.

Note: * The letter V in Vue' must be capitalized to function correctly."* Doing that initializes and creates a Vue instance, making it the starting point for building Vue applications. Next app.mount('#app'): This line mounts the Vue application instance to an HTML element with the ID app. This means that the Vue application will control and render content within this HTML element.

The Counter App

The Simple Counter App I developed features buttons for increasing, decreasing, and resetting the count to zero, followed by a display area to showcase these actions. These buttons allow users to manipulate the count displayed by the app. Let's get into how made each one of them functional.

HTML CODE

app.js CODE

- Display Area for showcasing the Counter App actions

Define an object within the Vue instance.
This object will be be returned by the data method. It defines a single property named count with an initial value of 0 for the display area.

This is Vue.js template syntax for data binding. It will display the value of the count variable in the paragraph. Whenever the count variable changes in the Vue instance, the displayed value in the paragraph also updates automatically, reflecting the new value of count. I went ahead to create an event lister that listens for the click event and then defined a function that occurs once the the display area is clicked here is the function defined

A constant is created called "digit" that prompts you to enter a digit, and then it gives a condition that if no digit is entered, it should return the current count in the display area; else if the digit is a valid number, it should display the number inputted in the prompt.
The below is the function for the clicked event
.

Increment, Decrement and Reset Button.

The Increment Button.

Here I used the plus sign + to represent the increment button. I simply used v-on which is a Vue.js directive that attaches an event listener to the add button and increases the value of count by 1 count++when the button is clicked.

The Decrement Button.

Similar to the Increment button Here I used the minus or subtraction sign - to represent the decrement button. I used v-on which is a Vue.js directive that attaches an event listener to the add button and decreases the value of count by 1 count--when the button is clicked.

The Reset Button.

The HTML CODE

The Reset Function

I created a function designed to reset count to zero. Within the HTML file, there's an event listener that detects a click on a reset button. Once the reset button is clicked, it triggers the execution of the function responsible for resetting the count to zero .

Forem: Gloria Ngbea