This tutorial will walk you through a simple Vue.js application that demonstrates dynamic class binding and event handling.
1. Setting Up the Vue.js Application
First, let's look at the basic structure of the Vue.js application: This structure sets up a basic HTML page with Vue.js included via a CDN. The <div id="app"> is where our Vue application will be mounted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue.js App with CDN (Production)</title>
<script src="vue.js"></script>
<style>
.text-red { color: red; }
.text-green { color: green; }
</style>
</head>
<body>
<div id="app">
<!-- Vue template goes here -->
</div>
<script>
// Vue application code goes here
</script>
</body>
</html>
2. Understanding Dynamic Class Binding
In the example, we have two buttons with dynamic class binding:
<button v-bind:class="buttonClasses" v-on:click="toggle">Click me</button>
<button v-bind:class="active ? 'text-red' : 'text-green'" v-on:click="changeStatus">Change Status</button>
Vue.js uses the v-bind:class directive (which can be shortened to :class) to dynamically bind classes to elements. This allows us to change the appearance of elements based on the application's state.
3. Event Handling with Vue.js
The v-on:click directive (which can be shortened to @click) is used to attach click event listeners to the buttons. These listeners call methods defined in the Vue application.
4. The Vue Application
Let's break down the Vue application code:
Vue.createApp({
data() {
return {
buttonClasses: 'text-green',
active: false
};
},
methods: {
toggle() {
this.buttonClasses = 'text-red';
},
changeStatus() {
this.active = !this.active;
}
},
}).mount("#app");
Let's look at what's inside:
data() {
return {
buttonClasses: 'text-green',
active: false
};
},
- The data function returns an object that defines the reactive state of your Vue application.
- buttonClasses : 'text-green' initializes a property that will be used for dynamic class binding. It starts with the value 'text-green'.
- active : false initializes a boolean property that tracks some active state in your app. It starts as false.
methods: {
toggle() {
this.buttonClasses = 'text-red';
},
changeStatus() {
this.active = !this.active;
}
},
The methods object defines functions that can be called in response to events in your Vue application.
- toggle() is a method that changes buttonClasses to 'text-red' when called. This would change the appearance of an element bound to this class.
- changeStatus() is a method that toggles the active property between true and false each time it's called. The ! operator inverts the boolean value.
Now, let's put it all together:
- Vue.createApp({...}) creates a new Vue application instance.
- The data function sets up the initial reactive state of the application.
- The methods object defines functions that can change this state.
- .mount("#app") tells Vue to mount this application to the DOM element with id "app".
When used with the HTML you provided earlier, this would create an interactive application where:
Clicking the first button would change its color to red (by changing buttonClasses).
Clicking the second button would toggle its color between red and green (by changing active).
This demonstrates Vue's reactivity system, where changes to data automatically trigger updates in the DOM.
