Vue2.0 study notes: Vue event modifier is used (reproduced)

Event Processing

     If you need inline statement processor to access the native DOM events. You can use special variables $event, it passed into methodsthe method.

     In the Vue, the event modifier handling many details DOM event, so that we no longer need to spend a lot of time to deal with these disturbing things, and to have more energy to focus on the logic handler. In the event Vue modifiers are:

• .stop: JavaScript is equivalent to event.stopPropagation()prevent event bubbling
• .prevent: JavaScript is equivalent to event.preventDefault()preventing the implementation of the default behavior (if the event is canceled, then cancel the event, without stopping further propagation of an event)
• .capture: Opposite to the direction of event bubbling, the event captured from outside to inside
• .self: Only trigger events within the scope of their own, do not contain sub-elements
• .once: Only trigger once

• .stop prevent event bubbling

  Bubbling event: two three nested parent-child relationship, and then have all the click event, click the child nodes, triggered from the inside to the outside of child nodes - click event, "the parent node

•  1 <!-- HTML --> 
   2 <div id="app"> 
   3 　　<div class="outeer" @click="outer"> 
   4 　　　　<div class="middle" @click="middle"> 
   5 　　　　　　<button @click="inner">点击我(^_^)</button>
   6  　　　　</div>
   7  　　</div> 
   8 　　<p>{{ message }}</p>  
  . 9  </ div > 
  10  the let App = new new Vue ({
   . 11   　　EL: '#app', 
   12 is  　　 Data () { 
   13 is  　　　　return {Message: 'bubbling test event'}}, 
   14  　　Methods: { 
   15  　　　　Inner: function ( ) {
   16  　　　　　　 this.message = 'Inner: this is the most inside the Button' 
   . 17  　　　　}, 
   18 is  　　　　middle: function () { 
   . 19  　　　　　　this.message = 'middle: this is the middle Div's' 
   20 is  　　　　}, 
   21 is  　　　　Outer: function () { 
   22 is  　　　　　　this.message = 'outer: this is outside Div' 
  23 　　　　} 
  24 　　} 
  25 })