How to achieve binding events vue--

Event Processing

---

 

 

• Monitor events

 

 

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

　　

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

<script>
    var practice1 = new Vue({
      el: '#box1',
      data: {
        counter: 0
      }
    })  
</script>

 

• Event handler method

---

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

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

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

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