You can use the v-on directive to bind event listeners to DOM events. It can be bound to either an event handler function (without the invocation parentheses) or an inline expression.
Follow through the steps and fall in love with the reactivity of Vue JS.
Setting up the Boilerplate
Create a new HTML file and name it Index.html
Here we’ve setup a basic HTML file for our use. Included the Vue JS from CDN and Initialised the new Vue instance for our use.
The Vue Method
For the Vue Method, we’ll make use of the Vue directives inside of our markup.
Changes in the HTML File
If you noticed the change here, we’ve added a new Vue model directive in our Input and a new Vue on-click directive to our Button & assigned the method name to it. This is how we register the Event Listeners in Vue JS.
Changes in Script
Initialize an empty string and assigned to the newItem model inside of data.
In Vue JS, there’s a special helper function called methods() for adding up the new methods.
Place the following code inside of the Vue Container.
The addItem method is assigned to the Button we’re focussing on and it’s simply pushing the new values from the Input field to the names array.
To learn more about Vue JS, you can visit their official website.
If you’ve any questions, leave us the comment below. You can also follow us on Twitter.