vue事件修饰符和键盘事件

Posted 2023-03-04

参考技术A 修饰符

vue.js为v-on提供了多个修饰符，方便我们处理一些DOM事件的细节，并且修饰符可以串联使用。主要的修饰符如下：

. stop  相当于js中的event.stopPropagation(),它是用来阻止冒泡的；

.prevent 相当于js中event.preventDefault(),它是用来阻止默认行为的；

.capture  捕获事件和冒泡事件(默认)是两种事件流,事件捕获是从document到触发事件的那个元素;冒泡事件是从下向上的触发事件；

.self  只有点击当前元素时候，才会触发事件处理函数

.once  只会触发一次

<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent="onSubmit"></form>

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

<form v-on:submit.prevent></form>

<div v-on:click.capture="doThis">...</div>

<div v-on:click.self="doThat">...</div>

<a v-on:click.once="doThis"></a>

https://blog.csdn.net/qq_39105508/article/details/83008604

除了事件修饰符之外，v-on还提供了按键修饰符，方便我们监听键盘事件中的按键。例如：

<input v-on:keyup.13="submitFn" /> 监听input的输入，当输入回车时触发submitFn函数（回车的keycode值为13），用于处理常见的用户输入完直接按回车提交。

vue.js给一些常用的按键名提供了别称，这样就省去了一些记keyCode的事件。常用按键码别名为：

need-to-insert-img

刚才的<input v-on:keyup.13="submitFn" />可以改为

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