This is the second day of my participation in the August More Text Challenge

Vue provides some modifiers to make coding easier, to sort out some common uses in projects

.trim

I remove the space at the beginning and end of the value, which is mostly used in the password input box in the project to prevent the user from duplicating the password with too many Spaces, resulting in password error

<div>
   <input type="text" v-model.trim="value" />
</div>
Copy the code

Note that it filters only the beginning and end Spaces, not the middle Spaces

.lazy

The value does not change in real time as the value is entered. The value is updated when the cursor moves away from the input box

<div>
   <input type="text" v-model.lazy="value" />
   <p>{{value}}</p>
</div>
Copy the code

.number

Convert value to a number

<div>
   <input type="text" v-model.number="value" />
</div>
Copy the code

If the user enters a number first, it will limit what you type to the number part

If the user enters a string first, the.number will have no effect and will require additional validations to restrict it

.stop

Due to the event bubble mechanism, binding a click event to an element triggers a parent click event.

<div @click="eventFn('b')">
  <button @click="eventFn('a')">test</button>
</div>

// script
eventFn(e){
  console.log(e)
}

// a
// b
Copy the code

Using.stop to prevent event bubbling is equivalent to calling the event.stopPropagation() method

<div @click="eventFn('b')">
  <button @click.stop="eventFn('a')">test</button>
</div>

// a
Copy the code

.capture

Events bubble up from the firing target by default. This modifier does the opposite and the event starts capturing from the top down

<div @click.capture="eventFn('a')">
  <div @click.capture="eventFn('b')">
    <div @click="eventFn('c')">
      test
    </div>
  </div>
</div>

// a b c 
Copy the code

.self

Events are triggered only by the element to which the event is bound

<div @click.self="eventFn('a')">
    <button @click="eventFn('b')">test</button>
</div>

// b
Copy the code

Clicking on a button does not trigger the parent element’s click event, but only when the parent element itself is clicked

.once

. Once The event is executed only once and will not be triggered again

<div>
   <button @click.once="eventFn">test</button>
</div>
Copy the code

.prevent

The default behavior used to block events

For example, block submission of forms when the submit button is clicked. The event.preventDefault() method is called.

<div>
   <form v-on:submit.prevent="onSubmit"></form>
</div>
Copy the code

.native

On custom components,.native is used to decorate the click event to ensure that it executes

<My-component @click.native="eventFn"></My-component>
Copy the code

. Left; Right; .middle

These three modifiers are events triggered by the three mouse buttons

. Left click; Right click; . Middle Middle click

<div>
   <button @click.right="eventFn">test</button>
</div>
Copy the code

.sync

This modifier is used to pass values to parent components that update the value of a prop

/ / the parent component
<comp :isShow.sync="isShow"></comp>

/ / child component
this.$emit('update:isShow', params)
Copy the code

When using.sync, the event name passed by the child component must be update:value, where value must be exactly the same as the name declared in the props in the child component