12. keyboard events and modifiers

주제

이전 강의에서 Vue에서 이벤트를 사용하는 방법에 대해 배웠습니다. 이번 강의에서는 키보드 이벤트에 대해 다룹니다. Vue는 키보드 이벤트 지원에 있어 많은 기능을 제공하며, 특정 키 또는 키 세트에 대한 이벤트를 트리거할 수 있습니다.

예를 들어, 중간 이름을 위한 필드를 추가하는 상황을 가정해 봅시다. 데이터 객체에 'Middle Name'이라는 새 속성을 추가하고, 초기값을 빈 문자열로 설정합니다. 이어서 중간 이름을 포함하도록 'full name' 함수를 업데이트합니다. 문서 내에서 첫 번째와 마지막 이름 필드 사이에 새 입력 요소를 추가합니다. 우리는 입력 시가 아닌 사용자가 키보드의 엔터 키를 누를 때 값을 변경하고자 합니다. 'keyup' 이벤트를 리스닝하고 'updateMiddleName' 함수를 호출할 것입니다.

'keyup' 이벤트는 사용자가 키를 누르고 놓을 때마다 발생합니다. 우리는 이벤트를 트리거할 특정 키를 제한하려고 합니다. 이 경우 엔터 키만을 감지하도록 하려고 합니다. 키보드 수정자는 이벤트 수정자와 유사하게 작동하지만, 키보드 입력에 관한 것입니다. 키보드 수정자를 사용하면 특정 키를 리스닝할 수 있으며, 일부 키에 대한 별칭도 제공됩니다. 예를 들어, 엔터 키에 대한 별칭을 사용할 수 있습니다.

또한, 컨트롤 키를 누른 상태에서만 'decrement' 함수를 트리거하도록 설정하는 예를 들 수 있습니다. 이는 'control'이라는 시스템 수정자를 클릭 이벤트에 적용함으로써 실행할 수 있습니다. 이를 테스트해보면, 컨트롤 키를 누른 상태에서만 'decrement' 버튼이 작동하는 것을 확인할 수 있습니다.

요약하자면, Vue에서는 키보드 이벤트뿐만 아니라 다른 이벤트에도 수정자를 사용하여 이벤트 처리 방식을 변경할 수 있으며, 이를 통해 코드를 더 깔끔하고 간단하게 만들 수 있습니다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div id="app" v-cloak>
    <p>{{  fullName() }}</p>
    <p><a :href="url" target="_blank">Google</a></p>
    <p>{{ raw_url }}</p>
    <p v-html="raw_url"></p>
    <p>{{ age }}</p>
    <hr />

    <label>First Name</label>
    <input type="text" v-model="firstName">

    <br />
    <br />

    <label>Middle Name</label>
    <input type="text" @keyup.enter="updateMiddleName">

    <br />
    <br />

    <label>Last Name</label>
    <input type="text" :value="lastName" @input.prevent="updateLastName('Last name event triggered!', $event)">

    <br />
    <br />

    <button type="button" @click="increment">Increment</button>
    <button type="button" @click="age--">Decrement</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.6/vue.global.prod.min.js"></script>
<script src="app.js"></script>
</body>
</html>

app.js

const vm = Vue.createApp({
    data() {
        return {
            firstName: 'John',
            middleName: '',
            lastName: 'Doe',
            url: 'https://google.com',
            raw_url: '<a href="https://google.com" target="_blank">Google</a>',
            age: 20,
        }
    },
    methods: {
        fullName() {
            return `${this.firstName} ${this.middleName} ${this.lastName.toUpperCase()}`
        },
        increment() {
            this.age++;
        },
        updateLastName(msg, event) {
            console.log(msg, event)
            this.lastName = event.target.value;
        },
        updateMiddleName(event) {
            console.log(event.target.value)
            this.middleName = event.target.value;
        },
    }
}).mount('#app');

main.css

[v-cloak] {
    display: none;
}

# 12. keyboard events and modifiers

# 주제

12. keyboard events and modifiers

주제