v-on的基本使用与参数问题

1.v-on的基本使用与语法糖 

 语法糖：@click

直接写在button内部，不调用函数

    <button @click="counter++">+</button>
    <button @click="counter--">-</button>

<button @click="sub">+</button>

<button v-on:click="add">+</button>
 
methods:{//新的属性，用于定义方法
      add:function()
      {
        console.log("add被执行");
        this.counter++;
      },

2.v-on的参数传递

2.1 v-on调用的方法无参数时，函数的括号可以省略

methods:{//新的属性，用于定义方法
      add:function()
      {
        console.log("add被执行");
        this.counter++;
      },

​

<button v-on:click="add">+</button>
等同于
<button v-on:click="add()">+</button>

2.2如果在有参数传入时省略括号，会报错

//方法缺少括号 
 <button @click="btn2Click">按钮3</button>

      btn2Click(abc){
        console.log("cccccccccccc",abc);
      }

此时相当于：

      btn2Click(event){
        console.log("cccccccccccc",event);
      }

2.3方法定义时既需要event参数也需要其他参数

不加括号也不写任何参数

<!--方法定义时既需要event参数也需要其他参数-->
  <button @click="btn3Click">按钮4</button>

      btn3Click(abc,event){
        console.log("cccccccccccc",abc,event);
      }

 event显示defined，abc显示event

如果直接写作

  <button @click="btn3Click(123,event)">按钮4</button>

 此时event被当做没有定义的变量

  如果想要手动获取浏览器产生的event，写作$event

  <button @click="btn3Click(123,$event)">按钮4</button>