Event modifier
.stop
Prevents events from bubbling. Equivalent to event.stopPropagation() in JSCopy the code
.prevent
The default behavior of unassociating an event (for example; Click on the hyperlink to jump to), equivalent to event.preventdefault () in JSCopy the code
.capture
Use event capture mode (as opposed to bubbling mode) when adding event listenersCopy the code
.self
The event. Target handler is fired when the current element is itself, not via bubble or capture modeCopy the code
.once
The bound event will only fire onceCopy the code
.passive
Actively prompt the browser, without calling Prevent, for the default behavior of the event, so you don't need to check@scroll, @touchMove, because every pixel moved will trigger an event,
// By default, the browser will check whether the default behavior is blocked every time, which will cause a lot of query time, affecting the screen slide effect.
// Add passive for prompt, query will be skipped to improve the smoothness of screen slidingNote: Passive and prevent conflict and cannot be bound to one listener at the same timeCopy the code
Key modifier
Esc: Return key. Enter: Enter key. Space: space keydeleteAnd backspace keys. Up /.down/. Left /. Right: up and down left and right keysCopy the code
System modifier
.exact 
// Control can fire the corresponding event only by the represented system modifier.
// For example, @click.ctrl.exact indicates that events can be triggered only when the CTRL key is pressed

// Events are triggered only when the following keys are in the pressed state
.ctrl
.alt
.shift

Copy the code
Mouse button modifier
.left/.middle/.right
Copy the code
Custom key modifier
Vue.config.keycodes. custom modifier name = key ASCII code// Can be obtained from event.keycode
Copy the code
.sync
Introduction: In Vue, the most common way for parent and child components to communicate is to pass data through props. The props value can only be updated in the parent component and passed to the child component. In the child component, it is not allowed to change the transmitted props value. But there are times when we need to change the props property value inside the child component and update it to the parent component, and we need the.sync modifier.Copy the code
.sync is a syntactic sugar. Sync is the abbreviation syntax for the parent component to listen for the child component to update a prop :name.sync is equivalent to :name="name" @update:name="name = $event"

// Emit events via $emit and pass parameters
// The parent component uses $event to get the arguments in $emit
Copy the code

Reference:

Vue event modifier (2). Prevent. Passive – simple (jianshu.com)

Vue. Sync modifier _XM2by’s blog -CSDN blog _sync