event modifier
.stop prevents the event from continuing to propagate.prevent
prevents the default behavior of
the label.capture uses the event capture mode, that is, the event triggered by the element itself is processed here first, and then handed over to the inner element for processing.self
only when event.target is the current element The handler is fired when
itself.once event will only fire
once.passive tells the browser that you don't want to prevent the default behavior of the event
<!-- 阻止单击事件继续传播 -->
<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>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
When using modifiers, the order is important; the corresponding code will be generated in the same order. So using v-on:click.prevent.self will prevent all clicks, and v-on:click.self.prevent will only prevent clicks on the element itself.
Second, the modifier of v-model
1 .lazy
By default, v-model synchronizes the value and data of the input box. It can be changed to resynchronize on the change event through this modifier.
<input v-model.lazy="msg">
2 .number
Automatically convert user input to numeric type
<input v-model.number="msg">
❤️ .trim
Automatically filter leading and trailing spaces entered by the user
<input v-model.trim="msg">
3. Modifiers for keyboard events
In our project, we often need to listen to some keyboard events to trigger the execution of the program, and Vue allows adding key modifiers when listening:
<input v-on:keyup.13="submit">
For some commonly used keys, key aliases are also provided:
<input @keyup.enter="submit"> <!-- 缩写形式 -->
All key aliases:
.enter
.tab
.delete (to capture delete and backspace keys)
.esc
.space
.up
.down .left
.right
modifier
keys:
.ctrl
.alt
.shift
.meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
Unlike key aliases, when modifier keys are used with the keyup event, the normal key must be pressed when the event is raised. In other words: if keyup.ctrl is to be raised, the other keys must be released while ctrl is being pressed; releasing ctrl alone will not raise the event.
<!-- 按下Alt + 释放C触发 -->
<input @keyup.alt.67="clear">
<!-- 按下Alt + 释放任意键触发 -->
<input @keyup.alt="other">
<!-- 按下Ctrl + enter时触发 -->
<input @keydown.ctrl.13="submit">