Getting started with Vue.js is easy and straightforward. In this tutorial, we’ll build a simple counter application that demonstrates how to use Vue.js to create dynamic user interfaces.
Step 1: Set up the project
To get started, we’ll create a new directory for our project and initialize it as a npm project. Open your terminal and run the following commands:
bashCopy codemkdir vuejs-counter
cd vuejs-counter
npm init -y
Step 2: Install Vue.js
Next, we’ll install the Vue.js library. Run the following command in your terminal:
Copy codenpm install vue
Step 3: Create the HTML template
Create a new file named index.html in your project directory and add the following HTML code:
phpCopy code<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js Counter</title>
</head>
<body>
<div id="app">
<p>Count: {{ count }}</p>
<button @click="incrementCount">Increment</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
In this HTML template, we’ve created a div with an ID of “app”, which will be the root element of our Vue.js application. The template also includes two elements: a paragraph that displays the current count and a button that increments the count when clicked.
Step 4: Create the JavaScript code
Create a new file named main.js in your project directory and add the following JavaScript code:
javascriptCopy codeconst app = new Vue({
el: "#app",
data: {
count: 0
},
methods: {
incrementCount() {
this.count++;
}
}
});
In this JavaScript code, we’re creating a new Vue instance and binding it to the “app” element in our HTML template. We’re also defining the initial state of the application by setting the “count” data property to 0. Finally, we’ve added a “incrementCount” method that increments the count when the button is clicked.
Step 5: Run the application
Open the index.html file in your web browser to see the application in action. You should see a paragraph displaying the count and a button labeled “Increment”. When you click the button, the count should increase.
And that’s it! You’ve just built your first Vue.js application. This is just the beginning of what you can do with Vue.js, so be sure to check out the official documentation for more information and examples.