Vue系列之事件绑定

---

一、Vue如何处理事件

1、v-on指令用法

<input type="button" v-on:click="num++" />
1

2、v-on简写形式

<input type="button" @click="num++" />
1

二、事件函数的调用方式

1、直接绑定函数名称

<button v-on:click="say">Hellobutton>
1

2、调用函数

<button v-on:click="say()">Say hibutton>
1

三、事件函数参数传递

1、普通参数和事件对象

<button v-on:click='say("hi",$event)'>Say hibutton>
1

四、事件修饰符

1、.stop阻止冒泡

调用 event.stopPropagation()。

<a v-on:click.stop="handle">跳转a>
1

2、.prevent取消默认事件

调用 event.preventDefault()。

<a v-on:click.prevent="handle">跳转a>
1

3、.self

<div v-on:click.self="doThat">...div>
1
2
3

五、按键修饰符

1、.enter回车键

<input v-on:keyup.enter="submit" />
1

2、.esc退出键

<input v-on:keyup.delete="handle" />
1

3、.delete(捕获“删除”和“退格”键)

<input type="text" v-on:keyup.delete="clearContent" v-model="uname" />
1

4、.tab(tab键)

5、.space(空格键)

6、.up(上)

7、.down(下)

8、.left(左)

9、.right(右)

六、自定义按键修饰符

全局 config.keyCodes 对象

<input type="text" v-on:keyup.f1="handleSubmit" v-model="pwd" />
<script type="text/javascript">
	Vue.config.keyCodes.f1 = 113;
script>
1
2
3
4

七、修饰符可以串联

<a v-on:click.stop.prevent="doThat">a>
1
2

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！