Vue [10] vue modifier

Vue [10] vue modifier

---

---

foreword

Vue modifiers are roughly divided into event modifiers, v-model modifiers, button modifiers, system modifiers, mouse button modifiers, and one that we often use when using frameworks, such as element modifiers.native.

---

1. Event modifiers

Modifier	effect
.stop	Prevent the click event from continuing to propagate
.prevent	The submit event no longer reloads the page
.capture	Use event capture mode when adding event listeners
.self	Trigger the handler only when event.target is the current element itself
.once	The click event will only fire once
.passive	The default behavior of the scroll event (i.e. the scroll behavior) will fire immediately

1. .stop modifier

<!-- 阻止单击事件继续传播(简单理解就是阻止冒泡) -->
<a v-on:click.stop="doThis"></a>

2. .prevent modifier

<!-- 提交事件不再重载页面（阻止默认行为） -->
<form v-on:submit.prevent="onSubmit"></form>

3. .capture modifier

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

4. .self modifier

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

5. .once modifier

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

Unlike other modifiers that only work on native DOM events, the .once modifier can also be used on custom component events.
6. .passive modifier
Vue also provides .passivea modifier .

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

This .passivemodifier can especially improve the performance of the mobile terminal.
Do not use .passive with .prevent because .prevent will be ignored and the browser may show you a warning. Remember that .passive tells the browser that you don't want to prevent the event's default behavior.

7. concatenation of modifiers

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

When using modifiers, order matters; the corresponding code will be generated in the same order. Thus, using v-on:click.prevent.selfwill prevent all clicks, while v-on:click.self.preventwill only prevent clicks on the element itself.

Two, v-model modifier

.lazyModifier

By default, the value of the input box is synchronized with the data after v-modeleach inputevent is triggered (except when the above input method combines text). You can add lazythe modifier to switch changeto syncing after the event:

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

The simple understanding is that the msg will not be updated when the form is entered, but wait until the input is completed, that is, when the value changes (change).

.numberModifier

By default, the value entered in the input box is a string, and .numberthe value entered in the input box can be made to be a numeric value.

<input v-model.number="age" type="number">

This is often useful because the value of an HTML input element will always return a string, even type="number"when . If the value cannot be parseFloat()parsed , the original value is returned.

.trimModifier

If you want to automatically filter the leading and trailing blank characters entered by the user, you can v-modeladd trimmodifiers:

<input v-model.trim="msg">

3. Key modifiers

1. When listening to keyboard events, we often need to check detailed keystrokes. Vue allows adding key modifiers for v-onwhen listening to keyboard events:

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

2. Now the key modifiers are all aliases, and there is also a way to write key codes. This method has been discarded. For example:

<input v-on:keyup.13="submit">

13 represents enter (Enter key)

3. Vue provides aliases for most commonly used key codes:

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right
  You can also customize key modifier aliases via the global config.keyCodesobject :

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

4. System Modifier Keys

The following modifiers can be used to implement listeners that trigger mouse or keyboard events only when the corresponding key is pressed.

• .ctrl
• .alt
• .shift
• .meta
  On Mac system keyboards, meta corresponds to the command key (⌘). On the Windows system keyboard meta corresponds to the Windows logo key (⊞). On Sun OS keyboards, meta corresponds to a solid jewel key (◆). On other specific keyboards, especially those of the MIT and Lisp machines, and their successors, such as the Knight keyboard, the space-cadet keyboard, meta is marked "META". On the Symbolics keyboard, meta is labeled "META" or "Meta".
  For example:

<!-- Alt + C （67是c的按键码）-->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

Please note that modifier keys are different from regular keys. When used with keyupevents , the modifier keys must be pressed when the event is triggered.

.exactModifier

The .exact modifier allows you to control which events are fired by the exact combination of system modifiers.

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

mouse button modifier

• .leftleft button
• .rightright click
• .middleMiddle Button
  These modifiers restrict the handler to responding to specific mouse buttons only.

Five, element modifiers (extra points for interviews)

For the input of elementUI, we need to add it later .native, because elementUI encapsulates the input, and the native event does not work.

	<el-button
        class="loginBtn"
        :loading="loading"
        type="primary"
        style="width:100%;margin-bottom:30px;"
        @click.native.prevent="handleLogin"
      >登录</el-button>

1. The native modifier allows the parent component to receive native events (click), otherwise it can only receive custom events (triggered by the child component $emit)

2. The native modifier can only be used on components, not on native tags