vue-event modifier + keyboard event

event modifier

1. prevent: prevent the default event (or use e.preventDefault() in the method)

<a href='https://blog.csdn.net/weixin_52993364?type=blog' @click.prevent='showInfo'>点我</a>

Explanation: In this way, the jump of the address will not occur after clicking

2. stop: prevent event bubbling (or use e.stopPropagation() in the method)

3. once: the event is only triggered once

4. capture: use the capture mode of the event

5. self: Only the element whose event.target is the current operation will trigger the event, similar to blocking the default event

6. Passive: The default behavior of the event is executed immediately, without waiting for the event callback to be executed (commonly used for mobile terminals and tablets)

<body>
<ul @wheel.passive='demo' class='list'>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
<script type='text/javascript'>
    methods: {
        demo() {
            for(i = 0; i < 1000; i++) {
                console.log('666')
            }
            console.log('累死了')
        }

    }

</script>

event handling

<template>
    <button @click="clickme($event, 666)">点我传个数据</button>
</template>
<script>
export default {
    data() {
        return {}
    },
    methods: {
        clickme(e, number) {
            console.log(e.target.innerText, number);
        }
    }
}
</script>

keyboard events

1. Commonly used button aliases

1. Press Enter

<template>
    <input type="text" placeholder="按下回车显示输入" @keyup.enter="showInfo">
</template>
<script>
export default {
    data() {
        return {}
    },
    methods: {
        showInfo(e) {
            console.log(e.target.value);
        }
    }
}
</script>

2. Delete = "delete (capture 'delete' and 'backspace' keys)

3. Exit=>esc

4. Space = "space

5. Line break=>tab (@keydown.tab)

6. Up=>up

7. Down => down

8, left =》 left

9, right => right

2. System modifier keys (ctrl, alt, shift, meta)

(1) Use with keyup: Press the modifier key at the same time, then press other keys, and then release the other keys, the event is captured

(2) Use with keydown: trigger events normally

3. Custom key name

 Vue.config.keyCodes.huiche = 13

Summarize

Event modifiers can be written consecutively:

Block also prevents bubbling by default

<a href='http://www.cc.com' @click.stop.prevent='clickme'>点我</a>

Modifier keys can only be triggered by pressing ctrl+y:

<input type="text" placeholder="按下回车显示输入" @keydown.ctrl.y="showInfo">