Vueイベントプロセッサ

すなわち、vueを使用して要素にイベントをバインドする方法についてです.v-onを使用して要素にイベントをバインドします.その後はイベントに続き、その後はメソッド名、または直接メソッド全体(簡単に言えば).
式をトリガー

     1
  
         {{ counter }}  。



new Vue({
  el: '#app',
  data: {
    counter:0,
 
  }
})
</code></pre> 
 <p>         p  {{ counter }}       1.<br>    ，    ，         ，    ，      。        js         。</p> 
 <h2>        </h2> 
 <pre><code><div id="app">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    //  `methods`        
    say: function (xx) {
      alert(xx)
    }
  }
})
</code></pre> 
 <p>  </p> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 300px; max-height: 88px;"> 
   <div class="image-view"> 
    <a href="https://img.  .com/image/info10/40c2199e7dc24523b51ebf7f723956c2.jpg" target="_blank"><img src="https://img.  .com/image/info10/40c2199e7dc24523b51ebf7f723956c2.jpg" width="300" height="88"></a> 
   </div> 
  </div> 
  <div class="image-caption">
    image.png 
  </div> 
 </div> 
 <h2>    event  ？</h2> 
 <p>  js      event   ，     <br> event   - <br> event   - <br> vue event     js  event      ，         ，  type        ，    click。</p> 
 <pre><code><script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  //   `methods`        
  methods: {
    greet: function (event) {
      // `this`         Vue   
      alert('Hello ' + this.name + '!')
      // `event`     DOM   
      if (event) {
          alert(event.type);//type      
          alert(event.target);//         
          alert(event.clientX);//  x   
      }
    }
  }
})
//      JavaScript       
app.greet() // -> 'Hello Vue.js!'

リファレンス
Vue.jsイベントプロセッサ|菜鳥チュートリアル
イベントリスニング-Vue.jsチュートリアル-極客学院Wiki