13 common vUE modifiers

  • Functional modification
  • Form modifier
  • Event modifier
  • Mouse button modifier
  • Key value modifier

Functional modification

  • .sync
  • When using sync, the event name passed by the sub-component must be update:value, which must be identical to the name declared in the props of the sub-component (myMessage, not my-message).
  • Note that v-bind with the.sync modifier cannot be used with expressions (e.g. V-bind :title.sync= “doc.title + ‘! ‘” is invalid). Instead, you can only provide the name of the property you want to bind, similar to the V-Model.
  • Using v-bind.sync on a literal object, such as v-bind.sync= “{title: doc.title}”, does not work because there are many edge cases to consider when parsing a complex expression like this.
<comp :myMessage="bar" @update:myMessage="func"></comp> //js func(e){this.bar = e; } // Child component js func2(){this.$emit('update:myMessage',params); } // parent <comp: mymessage. sync="bar"></comp> // child this.$emit('update:myMessage',params);Copy the code

Form modifier

  • .lazyEquivalent to anti-shake or onchange
  • .trimRemove leading and trailing Spaces
  • .numberTo digital
<div> <input type="text" v-model.lazy="value"> <p>{{value}}</p> </div> <input type="text" v-model.trim="value"> // If you enter numbers first, it will restrict you to only numbers // If you enter strings first, //abc1234-->abc1234 <input type="text" v-model.number="value">Copy the code

Event modifier

  • The complete event mechanism is: capture stage – target stage – bubble stage
  • The default is that event firing is the target phase — the bubble phase
  • Capture phase (building an event path from the root node down the target node, where events are received by page elements, down to specific elements)
  • Target stage (reaching the target node, the element itself)
  • Bubble phase (from the target node, follow the path constructed in the capture phase, that is, step by step, up to the page element as opposed to capturing the concrete element itself)
  • StopPropagation Prevents bubbling
  • StopImmediatePropagation Stops bubblings immediately, equivalent to capturing stage organization
  • .stopStop event bubbling,event.stopPropagation()
  • .preventPrevent event default behavior, event.preventdefalut ()
  • .selfThe callback is triggered only if the event is triggered from the element itself to which the event is bound.
  • .captureCapture phase — Target phase
  • .oncePerform a
  • .nativeCustom components use native events
  • .passiveThat’s equivalent to giving the onScroll event a lazy modifier; The mobile end freezes because it listens for element scroll events
< div @ click = "to amass (2)" > < button @. Click the stop = "to amass (1)" > ok < / button > < / div > / / output only 1 <! <form V-on :submit. Prevent ="onSubmit"></form> <div class="blue" @click.self="shout(2)"> <button @click="shout(1)">ok</button> </div> <button @click.once="shout(1)">ok</button> <My-component @click="shout(3)"></My-component> <! The default behavior of the scroll event (that is, the scroll behavior) will be triggered immediately --> <! Instead of waiting for 'onScroll' to finish --> <! -- this includes' event.preventdefault () '--> <div V-on :scroll. Passive ="onScroll">... </div>Copy the code

Mouse button modifier

  • . Left Click
  • Right click
  • . Middle Middle click
<button @click.right="shout(1)">ok</button>

Copy the code

Key value modifier

  • .keyCodeIf we didn’t use the keyCode modifier, we would trigger shout every time we pressed the keyboard
<input type="text" @keyup.keyCode="shout(4)"> <input type="text" @keyup.ctrl="shout(4)"> <input type="text" @keyup.ctrl.67="shout(4)"> <button @mouseover.ctrl="shout(1)">ok</button> <button @mousedown.ctrl="shout(1)">ok</button> < [email protected] ="shout(1)">ok</button> // common keys.enter.tab.delete //(trap "delete" and "backspace" keys).space.esc.up.down.left .right // System modifier key.ctrl.alt.meta. ShiftCopy the code
  • exact Limits the system modifier key
  • After writing like this you can still press CTRL + C, CTRL + V or CTRL + Normal, but you can’t press CTRL + Shift + Normal.
<button type="text" @click.ctrl.exact="shout(4)">ok</button>
Copy the code