vue学习记录-05 事件监听

vue学习记录-05 事件监听

这篇文章是根据codewhy老师在b站的视频进行的学习记录

---

---

一、v-on的基本使用

v-on用于绑定事件监听器，最常见的就是click点击事件，其他也有鼠标移入移出、键盘按下松开等。一般也可以写为“@”便于使用。
下面是一个简单的步进器小案例。

<div id='app'>
    <h2>{{counter}}</h2>
    <button v-on:click="increment">+</button>
    <button @click="decrement">-</button>
</div>

const app = new Vue({
      el: '#app',
      data: {
        counter: 0
      },
      methods:{
        increment(){
          this.counter++
        },
        decrement(){
          this.counter--
        }
      }
    })

二、v-on的参数问题

关于v-on的参数问题，我们分为三种情况来讲：

1、方法不需要参数的情况

如果在事件监听时，方法不需要额外参数，那么方法后面的小括号可以省略

   <button @click='btnClick()'>1</button>
   <button @click='btnClick'>1</button>

btnClick(){
          console.log('btnClick');
        },

2、 方法需要参数没传的情况

在事件定义时，写函数时省略了小括号，但是方法本身又是需要一个参数的，那么VUE会怎么传值呢？

正常传值的写法：

<button @click='btn2Click(123)'>2</button>

btn2Click(a){
          console.log('btn2Click',a);
        },

省略了小括号，所以没有传值的情况：

<button @click='btn2Click'>2</button>

这个时候，Vue会默认将浏览器生产的event事件对象作为参数传入到方法

引申：如果没有省略小括号，但是没有传值呢？

<button @click='btn2Click()'>2</button>

此时打印结果会显示undefined

3、方法需要参数和event对象的情况

方法定义时，我们需要event对象，同时又需要其他参数，这种情况我们需要怎么做呢？

按照情况2我们可以直接省略小括号，这样就可以拿到值了。

<button @click='btn3Click'>3</button>

btn3Click(event,a){
          console.log(event,a);
        }

但是，这个时候参数a又该怎么传值呢？或者把a和event对调一下，参数event还能正确的拿到event对象吗？

  btn3Click(a,event){
    console.log(a,event);
  }

这种情况下，拿到event对象的是参数a，参数event显示为undefined

其实很简单，我们直接把a的值和event对象与方法中参数的位置相互对应的写就完事了。

<button @click='btn3Click(123,event)'>3</button>

当然，上面这个写法也是错的，因为这样传过去的只是一个event字符串而已。
想要将event对象传过去，就得加个$符号，告诉浏览器这是event对象不是字符串才行。

<button @click='btn3Click(123,$event)'>3</button>

在调用方法时，手动的获取到浏览器参数的event对象：$event

三、v-on的修饰符

1、.stop修饰符

现在我们有这样的一行代码，点击button按钮后，你觉得会发生什么呢？

    <div @click="divClick">
      <button @click="btnClick">按钮</button>
    </div>

        btnClick(){
          console.log('btnClick');
        },
        divClick(){
          console.log('divClick');
        },

它会把div的点击事件也给执行一遍！而我们仅仅只是点击了button而已！
这种情况是可以避免的，给button按钮的@click加个.stop修饰符，就可以告诉浏览器：停！到此为止，不要再深究了！

    <div @click="divClick">
      <button @click="btnClick.stop">按钮</button>
    </div>

2、.prevent修饰符

有的时候，我们不希望某些元素执行他们默认的事件，这个时候我们可以给它加个.prevent修饰符。
比如表单的submit按钮，我们不希望点击后直接提交上去了，而是希望对数据做些修改再提交，就可以这么做。

    <form action="baidu">
      <input type="submit" value="提交" @click.prevent="submitClick">
    </form>

        submitClick(){
          console.log('submitClick');
          // 这里给它做一些数据处理之类的总之没那么快提交上去
        },

3、监听键盘的某个按键

在监听键盘时，一个键盘上有那么多个键，如果不加个修饰符给它限定一下是哪个键，那么对这个监听事件进行绑定实际上也没有什么太大的用处。

input type="text" @keyup="keyUp">

 keyUp(){
   console.log('keyUp');
 },

因为如果每个键都能触发绑定的方法，就起不到使用特定的按键进行控制的效果了，想想打拳皇如果随便搓几下就放出了大招，这样玩会有啥意思呢？

对按键进行绑定，最常用的就是回车键了，这里就以回车键来举个例子：

<input type="text" @keyup.enter="keyUp">

如果希望监听的是其他键，那可以把“.enter”改为“.”+按键对应的keycode 就可以了，这是keycode对照表：

字母和数字键的键码值(keyCode)

按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

数字键盘上的键的键码值(keyCode)

按键	键码	按键	键码
0	96	8	104
1	97	9	105
2	98	*	106
3	99	+	107
4	100	Enter	108
5	101	-	109
6	102	.	110
7	103	/	111

功能键键码值(keyCode)

按键	键码	按键	键码
F1	112	F7	118
F2	113	F8	119
F3	114	F9	120
F4	115	F10	121
F5	116	F11	122
F6	117	F12	123

控制键键码值(keyCode)

按键	键码	按键	键码	按键	键码	按键	键码
BackSpace	8	Esc	27	Right Arrow	39	-_	189
Tab	9	Spacebar	32	Dw Arrow	40	.>	190
Clear	12	Page Up	33	Insert	45	/?	191
Enter	13	Page Down	34	Delete	46	`~	192
Shift	16	End	35	Num Lock	144	[{	219
Control	17	Home	36	;:	186	\丨	220
Alt	18	Left Arrow	37	=+	187	]}	221
Cape Lock	20	Up Arrow	38	,<	188	'"	222

多媒体键码值(keyCode)

按键	键码
音量加	175
音量减	174
停止	179
静音	173
浏览器	172
邮件	180
搜索	170
收藏	171

来源：https://segmentfault.com/a/1190000005828048

4、.native修饰符

我们现在做了这么一个组件< cpon ></ cpon >，想要给它绑定一个点击事件完成某件事，但是如果直接给他绑定一个@click肯定是不能生效的。

<cpon @click="cpnClick"></cpon>

所以我们得借助.native修饰符，才能监听到该组件根元素的原生事件。

<cpon @click.native="cpnClick"></cpon>

5、.once修饰符

大家应该都有双十一双十二到点秒杀的经历，在抢秒杀商品时恨不得把屏幕都点穿，都不知道自己点过多少次。
也许点的人会觉得很爽，但是对于我们程序员来说就是个灾难，想象一下，数以万计的人同时在点击，而且单一个人就不知道点击了多少次，那这个秒杀的方法又需要执行多少次呢？
所以程序员就生气了，天天点点点的烦不烦，于是他就给程序加了个.once修饰符，告诉程序只有第一次的点击你要听，其他的时候装聋做哑就好了。

<button @click.once="btn2Click">按钮</button>

这样一来就皆大欢喜了，我们的第一位幸运儿抢到了东西很开心，其他人不知道自己的点击被无视了还在那里点得很开心，而我们作为程序员不用担心程序点击太多次而卡死也很开心。
其实这也是我们在做防抖节流优化时的一个思路，比如发现有人发信息给你分配任务时，先来一手假装不在，过会回来再看看他还有没有别的任务要你做，没有把第一件事做了再回信息告诉他这段时间你把他任务完成了，保证他不会因为你之前不回他信息而不高兴，而你也不用担心因为第一时间接了他的话而多了更多活。
之后我也会写一篇文章详细讲讲防抖节流，欢迎大家一起来讨论。