1.事件监听，指令v-on

1.事件监听：与用户交互，必须监听用户发生的事件，比如点击、拖拽、键盘事件等等

2.在Vue中使用v-on指令来监听事件
  指令v-on介绍：
    作用：绑定事件监听器
    缩写：@

2.v-on的基本使用

1.v-on的基本使用  
    <button v-on:click="counter++">+</button>
      // v-on: 表示要绑定事件监听
      // click: 绑定事件的类型，单击
      // click="counter++"  :后面接触发事件执行的内容

    <button v-on:click="add">+</button>
      // click="add"  ：触发事件，则执行add方法

2.v-on的语法糖：
    v-on:click可以写成@click   ( 即将v-on: 替换成 @  )
    如：<button v-on:clic="counter++">+</button>
        <button @click="counter++">+</button>

<div id="app"><h2>{{counter}}</h2><button v-on:click="counter++">+</button><button v-on:click="counter--">-</button>//直接接触发执行内容<button v-on:click="add">+</button><button v-on:click="dec">-</button>//接触发执行的函数<button @click="counter++">+</button><button @click="counter++">-</button>//v-on的语法糖-</div><script>const app=newVue({
    el:"#app",
    data:{
      counter:0},
    methods:{add(){//ES6中写法this.counter++},dec(){this.counter--}}})</script>

3.v-on中的参数问题

指令v-on中的参数
    ：在绑定一个方法时，该方法中可能会传入参数，则分析参数问题。
     （当v-on绑定某个方法时，方法中的（）可加可不加）
 
 1.若方法本身不传参数时，则可加可不加。
 
 2.若方法本身要传参数时：
     若加(),则和正常一样；
     若未加()，则vue会默认将浏览器产生的event事件对象作为参数传入到方法。

 * 绑定的方法中，若需要传event事件对象，同时又传需要其他参数时；
    则在调用方法时，我们可以通过$event来手动获取到浏览器参数的event对象。
    (即传参$event，表示传的是event事件对象)
    <button @click="btn3(30,$event)">按钮3</button>
    //则是传入两个参数，30和 event事件对象

<div id="app"><button @click="btn">按钮1</button><button @click="btn()">按钮1</button>//绑定方法时，方法本身不用传参数时，()可加可不加都可以<button  @click="btn2(20)">按钮2</button><button  @click="btn2()">按钮2</button>//为undefined//事件调用的方法，方法本身要传参数时，若加()，则跟我们平时的一样<button @click="btn2">按钮2</button>//绑定方法时，方法本身要传参数，若未加(),则默认传入事件对象event<button @click="btn3(30,$event)">按钮3</button>//方法定义时，若需要event事件对象和其他参数//则可以传参$event，表示传的是event事件对象</div><script>const app=newVue({
    el:"#app",
    data:{
      message:"你好啊"},
    methods:{btn(){
        console.log("按钮1");},btn2(number){
        console.log(number);//打印传参},btn3(number,event){
        console.log("-----",number,event);}}})</script>

4.v-on的修饰符

1. v-on的修饰符
     ：Vue提供了修饰符来修饰对应的事件；

2.修饰符的使用形式：
     v-on：事件类型.修饰符 ="  "
     v-on：click.stop="方法"

3.修饰符的种类：
    .stop ----》 则阻止了事件冒泡
    .prevent ----》 取消默认行为
    .{keyCode | keyAlias} ---》 只当事件是从特定键触发时才触发回调。
    .native  ---》  监听组件根元素的原生事件。
    .once  ---》 只触发一次回调。(即第一次点才触发，之后点不触发）

<div id="app"><div @click="Div">
    aaa<button @click.stop="Btn">按钮</button>//1.阻止事件冒泡</div>//div和button都绑定了事件；//我们点击按钮，因为事件冒泡，则会触发button和div的事件；//在vue中，我们使用.stop修饰符就可以阻止事件冒泡了；<form action="http://www.baidu.com"><input type="submit" value="提交"  @click.prevent="submitClick">//2.绑定了单击事件，则向要取消它跳转的默认行为//这样就可以自己在函数中收集数据，向服务器发请求--></form><input type="text" v-on:keyup="key">//3.监听键盘按键的抬起<input type="text" v-on:keyup.enter="key">//则只监听键盘中enter键的点击，即抬起按键enter，就触发key方法<button @click.once="Btn2">按钮2</button>//4.只有第一次点击时触发,单击只触发一次</div><script>const app=newVue({
    el:"#app",
    data:{
      message:"你好啊"},
    methods:{Div(){
        console.log("Div");},Btn(){
        console.log("Btn");},submitClick(){
         console.log("取消默认行为");},key(){
        console.log("key方法执行了");},Btn2(){
        console.log("按钮2执行了");}}})</script>