VueJs method and event handling is done very nicely and if you are coming from an angular background you will find yourself starting to pick up VueJs rather quickly and neatly. If you are coming from jQuery then Vue and Angular take a different approach to handling click events, whereas jQuery would look like this: [html] <div id="click-example">Click me</div> [/html] [js] $('#click-example').on('click',function(){ alert('hello'); }); [/js] Well you can handle events in vuejs like so: [html] <div id="click-example"> <div v-on:click="clickMe"> Click me </div> </div> [/html] [js] new Vue({ el: '#click-example', methods : { clickMe : function(){ alert('sent'); } } }) [/js] Here is pen to show you: [codepen_embed height=400 theme_id=1 slug_hash='aNJvWj' user='diquinnyonk' default_tab='result' animations='run'] See the Pen Vuejs by diquinnyonk (@diquinnyonk) on CodePen [/codepen_embed] Well wasn't that simple, and thats how great vue is in terms of being able to achieve what you need but in simple terms.

Rather than using v-on:click. You can use shorthand syntax of @click

So what if you wish to pass attributes/data through to a method? well vue has that covered too: [html] <div id="click-example"> <div v-on:click="clickMe('howdy')"> Click me </div> </div> [/html] [js] new Vue({ el: '#click-example', methods : { clickMe : function(input){ alert(input); } } }) [/js] [codepen_embed height=400 theme_id=1 slug_hash='grmaXp' user='diquinnyonk' default_tab='result' animations='run'] See the Pen Vuejs by diquinnyonk (@diquinnyonk) on CodePen [/codepen_embed] Again its nice and simple to work with input on a method. You can do quite a lot with this, which we will explore in future lessons.

Event modifiers

Have you had the need to use event.preventDefault() or event.stopPropagation()? You can still use these within your methods and pass an extra parameter in using the special $event parameter: [html] <button v-on:click="say('hello!', $event)">Submit</button> [/html] [js] // ... methods: { say: function (msg, event) { // now we have access to the native event event.preventDefault() } } [/js] Now you can do this but what is neater is adding these modifiers directly in the html itself. Well you will have a need to add event modifiers to your methods, you might be wondering what this might look like, here are some event modifiers to get you understanding them quicker: [html] <!-- the click event's propagation will be stopped --> <a v-on:click.stop="doThis"></a> <a @click.stop="doThis"></a> <!-- the submit event will no longer reload the page --> <form v-on:submit.prevent="onSubmit"></form> <form @submit.prevent="onSubmit"></form> <!-- modifiers can be chained --> <a v-on:click.stop.prevent="doThat"> <a @click.stop.prevent="doThat"> <!-- just the modifier --> <form v-on:submit.prevent></form> <form @submit.prevent></form> <!-- use capture mode when adding the event listener --> <div v-on:click.capture="doThis">...</div> <div @click.capture="doThis">...</div> <!-- only trigger handler if event.target is the element itself --> <!-- i.e. not from a child element --> <div v-on:click.self="doThat">...</div> <div @click.self="doThat">...</div> [/html] Doesn't it look neater? I think so and I'm sure its just an extra line of Javascript no longer needed in your JS code. I think its very nice to have these available upon method assignment in your html.

Key modifiers

One last note is the need to narrow down events to specific keys on the keyboard: [html] <!-- only call vm.submit() when the keyCode is 13 --> <input v-on:keyup.13="submit"> <!-- same as above --> <input v-on:keyup.enter="submit"> <!-- also works for shorthand --> <input @keyup.enter="submit"> [/html] Again its just nice and simple. Thanks for reading and lets keep learning.

Monthly Archives: March 2016

VueJs method and event handling

This entry is part 4 of 7 in the series VueJs

This entry is part 4 of 7 in the series VueJsVueJs method and event handling is done very nicely and if you are coming from an angular background you will find yourself starting to pick up VueJs rather quickly and neatly. If you are coming from jQuery then Vue and Angular take a different approach

Read more

VueJs directives introduction

This entry is part 3 of 7 in the series VueJs

This entry is part 3 of 7 in the series VueJsThis post is an introduction to directives in Vuejs. We have a later post on creating custom directives in VueJs, which will go into further detail on creating and using them. So directives are a way of providing a mechanism for mapping data changes to

Read more

VueJs class and style bindings

This entry is part 2 of 7 in the series VueJs

This entry is part 2 of 7 in the series VueJsThis episode in the VueJs series will focus on class and style bindings. It shall be a short lesson but all these little bits and pieces early on will help in the long term of coming together to be able to create much more complex

Read more

VueJs an introduction

This entry is part 1 of 7 in the series VueJs

This entry is part 1 of 7 in the series VueJsSo in the last 6 months I have been working solely with VueJs. And I have to say I am overjoyed at how wonderful this library is. It’s main purpose is for building web interfaces and rather than being a huge library that can be

Read more

Laravel whereDoesntHave

So working within laravel, You often find how far ahead taylor and the contributors thought for you. One great thing I recently had was I was trying to describe the need to constrain results of a set of models based on the relationship each model possessed. So what I needed was to be able to

Read more