vue中事件监听v-on的基本使用

v-on参数
当通过methods中定义方法，以供@click调用，需要注意参数问题，
情况一：如果该方法不需要额外参数，那么方法后的（）可以不添加。（）

<!-- 1、 事件调用的方法没有参数-->
  <button @click="btnClick">按钮1</button>
  <button @click="btnClick()">按钮2</button>
<!-- 2、 在事件定义时,方法本身需要一个参数，正常的写法应该是下面这样的-->
  <button @click="btn2Click(123)">按钮3</button>
<!--,那么如果不给参数的话，那么浏览器就会返回一个  undefined，不会报错
  <button @click="btn2Click()">按钮3</button>-->

  <!--如果连小括号都省了的话，Vue会默认将浏览器产生的event事件对象作为参数传给方法
  <button @click="btn2Click">按钮3</button>-->

<!-- 3、 方法定义时，既需要event事件对象，同时又需要其他对象-->
<!--  在调用方法时 如何手动获取event对象：$event-->
  <button @click="btn3Click(123,$event)">按钮4</button>
  <button>按钮5</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    
    
    el: '#app',
    data: {
    
    
      message:'你好啊'
    },
    methods:{
    
    
      btnClick(){
    
    
        console.log('btnClick');
      },
      btn2Click(event){
    
    
        console.log('......',event);
      },
      btn3Click(abc,event){
    
    
        console.log('+++++',abc,event);
      }
    }
  })
</script>

<div id="app">
  <h2>{
    
    {
    
    counter}}</h2>
  <!--<button v-on:click="counter++">+</button>
  <button v-on:click="counter&#45;&#45;">-</button>-->
  <!--<button v-on:click="increment">+</button>
  <button v-on:click="increment">-</button>-->
<!--  v-on的语法糖 ，就是直接是一个@-->
  <button @click="increment">+</button>
  <button @click="increment">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    
    
    el: '#app',
    data: {
    
    
      counter: 0
    },
    methods:{
    
    
      increment(){
    
    
        this.counter++
      },
      increment(){
    
    
        this.counter++
      }
    }
  })
</script>