10. passing on data with events

주제

이 강의에서는 이벤트와 함께 데이터를 전달하는 방법을 빠르게 살펴봅니다. 예를 들어, 콘솔에 로그를 출력하는 간단한 메시지를 이벤트와 함께 전달하는 방법을 설명합니다. 템플릿의 디렉티브 안에서 "Last name event triggered"라는 메시지를 전달하려고 합니다. 그러나 이것은 함수가 이벤트 객체를 기대하고 있기 때문에 함수를 깨뜨릴 수 있습니다. 함수에 인수를 전달하지 않으면 Vue가 이벤트 객체를 자동으로 전달하지만, 우리가 자체 인수를 전달하면 이벤트 객체를 수동으로 전달해야 합니다.

이벤트 객체는 특별한 이름인 $event로 지정됩니다. 템플릿에서 이벤트와 관련된 데이터를 $event 객체에 저장합니다. 이후에는 애플리케이션 내의 함수를 업데이트하여 새 인수를 처리합니다. 예를 들어, updateLastName 함수에서 첫 번째 매개변수를 메시지로, 두 번째 매개변수를 이벤트로 설정합니다. 함수 내에서 메시지 매개변수를 로그하고, 기본 이벤트 동작을 방지합니다.

페이지를 새로고침하고 콘솔을 열면 입력한 내용에 따라 마지막 이름이 업데이트되고 함수에 전달한 메시지가 로그됩니다. 이렇게 하면 인수를 전달하여 이벤트 핸들러의 동작을 사용자 정의할 수 있습니다. 추가적인 인수를 추가하려면 함수를 업데이트하여 이벤트 객체를 수용하도록 해야 합니다. 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>Last Name</label>
    <input type="text" :value="lastName" @input="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',
            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.lastName.toUpperCase()}`
        },
        increment() {
            this.age++;
        },
        updateLastName(msg, event) {
            event.preventDefault();
            console.log(msg, event)
            this.lastName = event.target.value;
        },
    }
}).mount('#app');

main.css

[v-cloak] {
    display: none;
}

# 10. passing on data with events

# 주제

10. passing on data with events

주제