In this part of tutorial, we are going to learn how to apply Events or User Input Handling in our application. Before we start our development, let us list down the things that we need for our project.
- Bootstrap (You can get it at getbootstrap.com)
Yes, we only need these two and we expect that you can do the setup already as you have read the previous chapter of this tutorial. If you are a newcomer in this chapter and have no idea on how to get things done, you can go back to the Declarative Rendering tutorial to review the skeleton of the project.
To get started, let us take a look at this code that we have created.
First, we have set up our available resources, including our Vue.js file as well as the bootstrap CSS file to have a little look and feel for our project. Next, we set up a button that will trigger an alert and will have little greetings. Then, we are going to integrate Vue’s feature in events. We can do this by adding, v-on:click=”alertAwesome” as an attribute in our button element. Now that we have integrated the event, let’s open and take a look at app.js.
In our app.js file, we created a new Vue constructor which includes the html element id, a declared greeting message and method. Inside the method, we created a function named alertAwesome. Now, it is time to trigger the greeting alert. Just put a simple alert(this.greetings), inside our alertAwesome function. Then refresh your page and click the button. You will then see an alert message similar to this image below.