Vue event handling (event modifiers, keyboard events, scrolling events)

The data in data will have data hijacking and setter and getter in data proxy vm

1. Event modifiers in Vue

Multiple instances can be used at the same time: @click.stop.prevent

1.prevent: Prevent default events (commonly used) 

2.stop: prevent event bubbling (commonly used)

3.once: The event is only triggered once (commonly used)

4.capture: use event capture mode

5.self: Only when event.target is the element of the current operation, the event will be triggered

6. Passive: The default behavior of the event is executed immediately, without waiting for the event callback to be executed, and it is often used on mobile terminals

2. Keyboard events

@keydowm Press the keyboard event @keyup Lift the keyboard to trigger the event

e.keycode keyboard event code e.key keyboard event name

1. Commonly used button aliases in Vue

Enter => enter (@keyup.enter)

delete => deLete (captures "delete" and "backspace" keys)

exit => esc

space=>space

Newline => tab (must use @keydowm.tab with keydowm)

up => up

down => down

left => left

right => right

2. Vue does not provide aliased buttons

You can use the original key value of the key to bind, but be careful to convert it to kebab-case (named with a short horizontal line)

3. System modifier keys (special usage): ctrl, alt, shift, meta(windows)

(1).Use with keyup: When you press a modifier key, press another key, and then release the other key, the event is triggered.

(2).Use with keydown: trigger events normally.

4. Use keyCode to specify a specific key (not recommended, some browsers have been discarded)

@keyup.13

5. Custom key aliases

Vue.config.keyCodes.Custom key name = key code

Vue.config.keyCodes.huiche = 13 
结果： @keyup.huiche == @keyup.enter == @keyup.13

6. The system modifier key can be set to click multiple keys at the same time

@keyup.ctrl.y

3. Scroll event

1. @scroll scroll bar scroll trigger

2. @wheel mouse wheel scroll trigger