Vue (seven)

Event Processing

Monitor events

You can v-onlisten for DOM events command, and run some JavaScript code that when triggered.

Example:

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

Results: slightly

Event handler method

However, many event processing logic is more complex, so write directly to the JavaScript code in the v-oninstruction is not feasible. So v-onyou can also receive the name of a method needs to be called.

Example:

<div ID = "Example-2"> 
  <- `greet` is defined below in the name of the method -!> 
  <Button ON-V: the Click =" the greet "> Greet </ Button> 
</ div>

example2 = var new new Vue ({ 
  EL: '# example2' , 
  Data: { 
    name: 'Vue.js' 
  }, 
  // methods defined in the object `methods` 
  Methods: { 
    the greet: function (Event) { 
      // `this` this point in the process where Vue instance 
      Alert ( 'the Hello' + the this .name + '!' )
       // ` event` native DOM events 
      IF (event) { 
        Alert (event.target.tagName) 
      } 
    } 
  } 
} ) 

// can be invoked directly in JavaScript methods 
example2.greet () // => 'Vue.js the Hello!'

Results: slightly

Method inline processor

In addition to directly bind to a method can also be inline JavaScript statement calling the method:

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

Sometimes need inline statement processor access to the original DOM event. You can use the special variable $eventit passed to the method:

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ... 
Methods: { 
  The warn: function (the Message, Event) { 
    // Now we can access the native event object 
    IF (Event) { 
      event.preventDefault () 
    } 
    Alert (the Message) 
  } 
}

Event Modifier

Called in the event handler event.preventDefault()or event.stopPropagation()a very common requirement. Although we can easily achieve this point in the process, but is a better way: only pure data logic method, rather than the DOM event details.

To solve this problem, Vue.js to v-onprovide event modifier . Mentioned earlier, by the command modifier is a suffix beginning point representation.

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<-! Stop the click event continues to spread -> 
<a v-on:click.stop="doThis"> </a> 

<-! Reload the page to submit event is no longer -> 
<form v-ON : submit.prevent = "onSubmit"> </ form> 

<- modifier can be connected in series ->! 
<a v-on:click.stop.prevent="doThat"> </a> 

<- only modified! break -> 
<form v-oN: submit.prevent> </ form> 

<! - use event capture mode when adding an event listener -> 
<! - That event triggered the first internal element in this process, then was handed over to the internal processing elements -> 
<div v-oN: click.capture = "doThis"> ... </ div> 

! <- only when event.target is triggered when the current element handler itself - -> 
<- that the event is not triggered from inside element ->! 
<div v-ON: click.self = "dothat"> ... </ div>

note:

When using the modifier, the order is important; the appropriate code is generated in the same order. Therefore, use v-on:click.prevent.selfwill prevent all clicks , but v-on:click.self.preventonly prevents clicks on the element itself.

2.1.4 New

<! - click event will only be triggered once -> 
<a v-on:click.once="doThis"> </a>

2.3.0 New

Vue also corresponds to addEventListenerthe passiveoption provided .passivemodifier.

<! - default behavior for scrolling events (ie scrolling behavior) will immediately trigger -> 
<! - without waiting for the completion of `onScroll` -> 
<! - This includes` event.preventDefault () ` case -> 
<div V-ON: scroll.passive = "onScroll"> ... </ div>

This can improve the performance of particular modifier .passive mobile terminal.

note:

Do not put .passiveand .preventuse together, because .preventwill be ignored and the browser may display a warning to you. Remember that .passivetells the browser that you do not want to prevent the default behavior of the event.

Key modifiers

When listening keyboard events, we often need to check detailed button. Vue allowed to v-onadd modifier keys when the monitor keyboard events:

<! - only to call `vm.submit ()` when `key` Enter` is` -> 
<the INPUT v-ON: keyup.enter = "the Submit">

You can direct KeyboardEvent.keyany valid key name exposure into a kebab-case as a modifier.

<input v-on:keyup.page-down="onPageDown">

In the above example, the handler is invoked only when the $ event.key equal PageDown.

System modifier keys

2.1.0 New

Can be used as a modifier to achieve only trigger a mouse or keyboard event listener in the only press the corresponding button.

• .ctrl
• .alt
• .shift
• .meta

E.g:

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

note:

Please note that the modifier keys and buttons different routine, and in keyupan event together with the modified event trigger button must be pressed. In other words, just hold down the ctrlrelease button under other circumstances, to trigger keyup.ctrl. But only release ctrlwill not trigger events. If you want this behavior, to ctrlswitch to keyCode: keyup.17.

1..exact modifier

.exact modifiers allow you to control the precise system modifiers triggered by a combination of events.

<! - will trigger even if the Alt or Shift is pressed together -> 
<@ click.ctrl the Button = "onClick"> A </ the Button> 

<! - and only when it is pressed Ctrl trigger -> 
<@ click.ctrl.exact the Button = "onCtrlClick"> a </ the Button> 

<-! no system modifier is pressed when it is triggered -> 
<@ click.exact the Button = "onClick" > A </ button>

2. mouse button modifier

2.2.0 New

These modifiers may limit .left.right.middle handler responds only to a specific mouse button.

Why listen to events in HTML?

You may notice that this event listeners manner contrary to the separation of concerns (separation of concern) that the long-standing tradition. But do not worry, because all Vue.js event handling methods and expressions are strictly bound to the ViewModel current view, it does not cause any difficulties in maintenance. In fact, the use v-onhas several advantages:

1. Glance at the HTML template will be able to easily locate methods in JavaScript code corresponding.

2. Because you do not need to bind events in JavaScript in the manual, your ViewModel code can be very pure logic, and DOM completely decoupled, easier to test.

3. When a ViewModel is destroyed, all event handlers are automatically deleted. You do not have to worry about how to clean them.