Vue事件监听

与用户进行交互时，需要监听到用户发生的事件，比如：点击、拖拽、键盘事件等等。
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

一、v-on的基本使用

<button v-on:click="counter++">+</button>
// v-on: 表示要绑定事件监听
// click: 绑定事件的类型，单击
// click="counter++":click后面接触发事件要执行的内容
<button @click="counter++">+</button> // 语法糖

<div id="app">
	<button @click="increment">+</button>
	<button @click="decrement">-</button>
	<h2>{{counter}}</h2>
</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>

二、v-on的参数问题

在绑定一个方法时，该方法中可能会传入参数，则需要去分析参数的问题。
当v-on绑定某个方法时：
(1)如果方法本身不传参数时，则方法中的（）可加可不加
(2)如果函数本身需要一个参数，而没有加（），vue会将浏览器产生的event事件对象作为参数传入到方法
(3)方法定义时，我们需要event对象，同时又需要其他参数，则在调用方法时，我们可以通过$event来手动获取到浏览器参数的event对象。
注意：$event 如果直接写event会报错，vue会把它当成一个变量

<div id="app">
  <button @click="btn">按钮1</button>
  <button @click="btn()">按钮1</button>
  //绑定方法时，方法本身不用传参数时，()可加可不加都可以，效果一样

  <button  @click="btn2(123)">按钮2</button> // 123
  <button  @click="btn2()">按钮2</button>   //为undefined
  //没有传参数，而下面的方法里面需要接收参数，会打印出undefined
  //事件调用的方法，方法本身要传参数时，若加()，则跟我们平时的一样
   
  <button @click="btn2">按钮2</button> // MouseEvent对象
  //绑定方法时，方法本身要传参数，若未加(),则默认传入事件对象event

  <button @click="btn3(30,$event)">按钮3</button>
   //方法定义时，若需要event事件对象和其他参数
   //则可以传参$event，表示传的是event事件对象
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊"
    },
    methods:{
      btn(){
        console.log("按钮1");
      },
      btn2(number){
        console.log(number);      //打印传参
      },
      btn3(number,event){
        console.log("-----",number,event);
      }
    }
 })
</script>

三、v-on的修饰符

1、在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求，Vue.js 为 v-on 提供了事件修饰符，可以更加轻松简洁地去实现。
2、修饰符的使用形式：
v-on：事件类型.修饰符 =" "
v-on：click.stop=“方法”
3、修饰符的种类(举例说明)：

(1)<!-- 阻止单击事件继续传播即阻止事件冒泡 -->
<div @click.stop="doThis"></div>
(2)<!-- 提交事件不再重载页面即阻止默认行为 -->
<form @submit.prevent="onSubmit"></form>
(3)<!-- 点击事件将只会触发一次 -->
<a @click.once="doThis"></a>
(4)<!-- 按键修饰符 -->
<input @keyup.enter="submit">

<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 = new Vue({
    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>