v-on使用

作用：绑定事件监听器
缩写：@

V-ON参数

当通过methods中定义方法，以供@click调用时，需要注意参数问题：
①如果该方法不需要额外参数，那么方法后的()可以不添加
    但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
②如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--事件调用的方法没有参数-->
    <button @click="btn1Click">按钮1</button>

    <button @click="btn2Click()">按钮2</button>

    <!--在事件定义时，写函数时省略了小括号，但是方法本身需要一个参数的，这个时候，vue会默认将浏览器生成的event事件对象作为参数传入到方法-->
    <button @click="btn3Click">按钮3</button>
    <!--在方法定义时，我们需要event对象，同时又需要其他参数-->
    <button @click="btn4Click(ccc,$event)">按钮4</button>
    <!--监控enter键-->
    <input @keypress.enter="keyPress"></input>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          message: '你好!',
          ccc:123
      },
      methods:{
          btn1Click(){
              console.log("btn1Click");
          },
          btn2Click(aaa){
              console.log(aaa);//函数调用未传入参数，打印undefined
          },
          btn3Click(bbb){
              console.log(bbb);//打印PointerEvent
          },
          btn4Click(ccc,event){
              console.log(ccc,event);//打印123,PointerEvent
          },
          keyPress(){
              console.log("按下了ENTER键")
          }
      }
    })
</script>
</body>
</html>