Listening for Events

VueJS uses the v-on attribute added in HTML tags to listen to the events.
Usually, the value of the v-on attribute is the name of a method defined in the methods property. The specified method is called when the event is emitted.

Basic syntax:
<button v-on:eventName='methodName'>Try it</button>

<script>
var vm = new Vue({
 //...
 methods:{
 methodName: function(event){
 //code to execute..
 }
 }
})
</script>
- eventName is the name of the event: click, input, mouseenter, etc.

Simple example with the click event:
<div id='demo'>
<h1>{{hi}}</h1>
<button v-on:click='greet'>Try it</button>
</div>

<script>
var vue_ob = new Vue({
 el: '#demo',
 data: {hi: ''},
 methods:{
 greet: function(ev){
 this.hi ='Hello brother';
 }
 }
})
</script>

You can set the event handler from v-on to pass a value, and the event instance to the method:
<button v-on:eventName='methodName("string", $event)'>Try it</button>

<script>
var vm = new Vue({
 //...
 methods:{
 methodName: function(value, event){
 //code to execute..
 }
 }
})
</script>

Test and study the following example:
<div id='demo'>
<h1>{{hi}}</h1>
<a href='/' v-on:click='test("The link not works", $event)'>Open the page</a>
</div>

<script>
var vue_ob = new Vue({
 el: '#demo',
 data: {hi: ''},
 methods:{
 test: function(val, ev){
 this.hi = val;
 if(ev){
 ev.preventDefault();
 alert('Link address: '+ ev.target.href);
 }
 }
 }
})
</script>

Multiple events in v-on

You can add multiple events into an object in a single v-on directive, but without an argument.
- Syntax:
<button v-on={event_1:method_1, event_2:method_2}>Try it</button>

Note: With this method you cannot add modifier, nor pass an argument to the event handler, but it is automatically passed the event instance object.


Example:
<div id='demo'>
<div v-bind:style='styleobj' v-on='{mouseenter:bground, mouseleave:bground}'>Place the mouse here</div>
</div>

<script>
var vue_ob = new Vue({
 el: '#demo',
 data: {
 styleobj:{background:'#fbfc00', height:'111px', width:'111px'}
 },
 methods:{
 bground: function(ev){
 let bgr ={mouseenter:'#bbbbfe', mouseleave:'#00e000'};
 this.styleobj.background = bgr[ev.type];
 }
 }
})
</script>

Event Modifiers

Vue has event modifiers available on v-on attribute. They are directive postfixes denoted by a dot.
Syntax:
<button v-on:eventName.modifier='methodName'>Try it</button>

Examples with some modifiers available in Vue:
prevent - calls event.preventDefault().
 
<form action='/' id='frm1' v-on:submit.prevent='test'>
The submit event will not reload the page, but will call a Vue method.<br>
<input type='text' name='inp1' value='MarPlo'/> <input type='submit' value='Send'/>
<div>{{text}}</div>
</form>

<script>
var vue_ob = new Vue({
 el: '#frm1',
 data: {
 text:''
 },
 methods:{
 test: function(ev){
 this.text = ev.target.inp1.value;
 }
 }
})
</script>
once - trigger handler at most once.
<div id='demo'>
Nr. clicks: <b>{{nrc}}</b><br>
Only one click is emitted: <button v-on:click.once='nrc +=1'>Click</button>
</div>

<script>
var vue_ob = new Vue({
 el: '#demo',
 data: {
 nrc:0
 }
})
</script>
self - only trigger handler if event was dispatched from this element, not from a child element.
<div id='demo'>
Click event is registered with '<b>self</b>' modifier on Parent.<br>
If you click on the Child element, it will have no effect.<br>
Nr. clicks: <b>{{nrc}}</b><br>
<div style='background:#b0b0fe; height:144px; text-align:center; width:220px' v-on:click.self='nrc +=1'>
Parent
<div style='background:#00da00; margin:12px; height:88px; width:115px'>Child</div>
</div>
</div>

<script>
var vue_ob = new Vue({
 el: '#demo',
 data: {
 nrc:0
 }
})
</script>
left | middle | right - only trigger handler for left, middle or right button mouse events.
<div id='demo'>
It registers the clicks on the right button mouse: <b>v-on:click.right.prevent</b>.<br>
The <b>prevent</b> modifier is added to stop default behavior (here to stop opening menu on right click).<br><br>
Nr. clicks: <b>{{nrc}}</b><br>
<div style='background:#afaffe; height:144px; text-align:center; width:222px' v-on:click.right.prevent='nrc +=1'>
Right click here
</div>

<script>
var vue_ob = new Vue({
 el: '#demo',
 data: {
 nrc:0
 }
})
</script>

You can chain multiple modifiers on an event with v-on, see in the example above: v-on:click.right.prevent.


Key Modifier

Vue.js allows adding key modifiers to v-on when listening for key events.
- Syntax:
v-on.eventname.keyname
We can make use of multiple keynames. For example: v-on.onkeydown.ctrl.enter

- Example:
<div id='demo'>
Add some text, then press enter.
<form action='/' v-on:keydown.enter.prevent='submitFrm'>
<input type='text' value='MarPlo'/>
<div v-html='str'></div>
</form>
</div>

<script>
var vue_ob = new Vue({
 el: '#demo',
 data: {
 str:''
 },
 methods:{
 submitFrm:function(ev){
 this.str ='The form submits the text: <b>'+ ev.target.value +'</b>';
 }
 }
})
</script>

v-on.event shorthand

You can replace the v-on: with the character @ in Vue syntax, as a shorthand for v-on:.
- Syntax:
<div @eventName='methodName'></div>

Dynamic events

You can also use Dynamic events, which are added between square brackets:
v-on:[event]='methodName'

//OR
@[event]='methodName'

Example:
<div id='demo'>
<h1>{{hi}}</h1>
<button @[ev_name]='greet'>Try it</button>
</div>

<script>
var vue_ob = new Vue({
 el: '#demo',
 data: {
 hi: '',
 ev_name: 'click'
 },
 methods:{
 greet: function(ev){
 this.hi ='Forgive the past, love the present, trust the future.';
 }
 }
})
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Vue JS - Events

Last accessed pages

  1. PHP PDO - Select query, fetch (22273)
  2. Simple arithmetic calculator in PHP (448)
  3. PHP MySQL - using MySQLi (8670)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (62115)
  5. Display UL bullets and OL numbers on the right side (2725)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1269)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1241)
  3. Tabs effect with CSS (1226)
  4. Contact page - CoursesWeb (1224)
  5. Insert, Select and Update NULL value in MySQL (729)