05 vue中的事件监听

事件监听

1、v-on

• 作用：绑定事件监听器
• 缩写：@
• 预期：Function | InLine Statement | Object
• 参数：event

（1）基本用法

<div id = "app">
  <h2>{{counter}}</h2>
  <!-- 这两行是最基本的写法，基本不用，因为有复杂操作的话会写的很多 -->
  <!-- <button v-on:click = "counter++">+</button> -->
  <!-- <button v-on:click = "counter--">-</button> -->
  
  <!-- 这两行是v-on的常规写法 -->
  <!-- <button v-on:click = "increment">+</button> -->
  <!-- <button v-on:click = "decrement">-</button> -->
  
  <!-- 这两行是v-on的语法糖写法（就是简写） -->
  <button @click = "increment">+</button>
  <button @click = "decrement">-</button>
</div>
<script src = "../js/vue.js"></script>
<script>
  const app = new vue ({
    el : "#app",
    data : {
      counter : 0,
    },
    methods : {
      increment(){
        this.counter++
      },
      decrement(){
        this.counter--
      }
    }
  })
</script>

2、v-on的参数

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

情况一：如果该方法不需要额外参数，那么方法后的（）可以不添加。

情况二：如果需要同时传入某个参数，同时需要event时，可以通过￥event传入事件。

<div id = "add">
  <!-- 1、事件调用方法没有参数   两种写法都可以 -->
  <button @click = "btn1Click()">按钮1</button>
	<button @click = "btn1Click">按钮1</button>
  
  <!-- 2、在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候，vue会默认将浏览器生产的event事件对象作为参数传入到方法 -->
  <button @click = "btn2Click(123)">按钮2</button>  <!--这种会打印123-->
  <button @click = "btn2Click()">按钮2</button>     <!--这种会打印undefined-->
  <button @click = "btn2Click">按钮2</button>       <!--这种会打印event-->
  
  <!-- 3、方法定义时，我们需要event对象，同时又需要其他参数 -->
  <!-- 在调用方式，如何手动的获取到浏览器参数的event对象：$event -->
  <button @click = "btn3Click（abc，$event）">按钮3</button>
  
</div>
<script src = "../js/vue.js"></script>
<script>
  const app = new vue({
    el : "#app",
    data : {
      message : "你好"，
    },
    methode : {
      btn1Click(){
        console.log("btn1Click");
      },
      btn2Click(abc){
        console.log('-------',abc);
      },
      btn3Click(){
        console.log('+++++++',abc,event);
      }
    }
  })
</script>

3、v-on的修饰符

（1）.stop修饰符的使用

作用：正常情况下点击btn的话div也会被点击，但是加上.stop的话就不会了。（阻止冒号（我也不太懂，反正就前面那个意思，就不会双重点击了））

<div id = "app">
	<div @click = "divClick">
    aaaaa
    <button @click.stop = "btnClick"></button>
  </div>
</div>
<script src = "../js/vue.js"></script>
<script>
  const app = new vue({
    el : "#app",
    data : {
    	message : "你好"，  
    },
    methods : {
      btnClick() {
        console.log("btnClick");
      },
      divClick() {
        console.log("divClick");
      },
    }
  })
</script>

（2）prevent修饰符的使用

作用：取消了自动提交

<div id = "app">
	<form>
    <input type = "submit" value = "提交" @click.prevent = "submitClick">
  </form>
</div>
<script src = "../js/vue.js"></script>
<script>
  const app = new vue({
    el : "#app",
    data : {
    	message : "你好"，  
    },
    methods : {
      submitClick(){
        console.log("submitClick");
      }
    }
  })
</script>

（3）@keyup.enter修饰符的使用

作用：keyup为键帽抬起事件，后面加上.enter为专门监听enter抬起，不加的话监听所有键帽

<div id = "app">
  <input type = "text" @keyup.enter = "keyUp">
</div>
<script src = "../js/vue.js"></script>
<script>
  const app = new vue({
    el : "#app",
    data : {
    	message : "你好"，  
    },
    methods : {
      keyUp(){
        console.log("keyUp");
      }
    }
  })
</script>

（4）.once修饰符的使用

作用：只触发一次回调

<div id = "app">
  <button @click.once = "btnClick"></button>
</div>
<script src = "../js/vue.js"></script>
<script>
  const app = new vue({
    el : "#app",
    data : {
    	message : "你好"，  
    },
    methods : {
      btnClick(){
        console.log("btnClick");
      }
    }
  })
</script>