Vue User Input

Welcome to another chapter of Vue.js tutorial. Now that we have learned from the previous tutorial what Declarative Rendering is, it is now the best time to learn another feature of this Javascript framework.

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.

  1. Bootstrap (You can get it at getbootstrap.com)
  2. Vue.js

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.

user input

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.

user input

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.

user inputIn the next tutorial, we are going to learn how to integrate the for loop feature of Vue.js.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.