SOURCE

const ap=new Vue({
  el:'#app', 
	data:{ 
	  message:'事件监听v-on',      
      counter:0,
	},
    methods:{
      increment(){
       this.counter++;
        },
      decrement(){
        this.counter--;
        },
        eventment(name)
        {
          console.log(name);
        }
    },
}); 

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app" style="max-width:800px;height:400px">	
	<h2>{{message}}</h2>
    <h2>{{counter}}</h2>
   <button v-on:click="increment">+</button>
   <button v-on:click="decrement">-</button>
   <!--在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候，Vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
   <!--在函数需要参数的时候，只有小括号没有参数，不会报错，-->
    <button v-on:click="eventment()">事件</button>


    <div @click="eventment('e')"> 单击 
        <button @click.stop="eventment('55')">事件</button>
    </div>
   
    <input @keyup="eventment(55)"/><!--只要是在输入框输入就会触发-->
    <input @keyup.enter="eventment(55)"/><!--回车时才会调用-->

    <button @click.once="eventment('一次')">只触发一次</button><!--只能触发一次-->


</div>