6.VUE事件对象event

案例1

<div id="app">
    <!--直接调用的为传参方法，方法中默认会有第一个参数传递进去，就是event对象-->
    <button type="button" @click="show">show</button>
</div>

 /*vue中使用event对象时，禁止使用event这个单词表示event对象**/
 show(e){
     console.log(e);
  },

点击“show1”

案例二

    <!--调用方法时传参，则会导致默认的event对象消失-->
    <button type="button" @click="show2(123)">show2</button>

  show2(e){
       console.log(event);
       //因为不够兼容，禁止使用，此处的event镀锡是封装在window对象中，属于原生js使用
       //VUE对event对象有进一步的封装，尽量不要使用原生event
       console.log(e);
  },

点击“show2”：

案例三

 <!--调用方法时需要同时传递参数和event对象时，使用关键字$event来实现,$event可以出现在任何位置-->
    <button type="button" @click="show3(123,$event)">show3</button>

   show3(num,e){
	   console.log(num);
	   console.log(e);
   }

点击“show3”