9. listening to events

주제

이 강의에서는 Vue.js를 사용하여 기본 브라우저 이벤트(예: 클릭, 키 입력, 호버 등)를 감지하고 이에 대응하는 기능을 구현하는 방법에 대해 배웁니다. Vue.js에서는 디렉티브를 사용하여 애플리케이션 내에서 이벤트를 쉽게 리스닝할 수 있습니다.

먼저 "Age"라는 새 데이터 속성을 만들고, 이 값을 템플릿 안에서 표시하는 방법을 설명합니다. 그런 다음 사용자가 버튼을 클릭할 때마다 나이가 증가하거나 감소하는 버튼을 추가하는 방법을 소개합니다. 이를 위해 v-on 디렉티브를 사용하여 클릭 이벤트를 감지하고, 이 이벤트가 발생할 때 나이 속성을 업데이트하는 함수를 실행합니다.

또한, v-model 디렉티브를 사용하여 입력 필드와 데이터 속성 간의 양방향 바인딩을 설명합니다. 하지만 더 많은 제어를 원할 경우 v-model 대신 v-bind를 사용하여 입력 필드의 값을 수동으로 업데이트하는 방법을 소개합니다. 이렇게 함으로써, Vue.js가 초기에 설정한 값만을 사용하는 대신, 입력 필드의 변경사항을 감지하고 데이터 속성을 업데이트할 수 있습니다.

마지막으로, Vue.js에서 이벤트 리스닝과 데이터 바인딩을 사용하여 v-model 디렉티브와 유사한 기능을 구현하는 방법을 보여줍니다. 이 과정에서 필요한 경우 추가적인 제어를 할 수 있는 장점이 있습니다. v-model은 편의를 위한 구문적 설탕(syntactic sugar)으로 설명되며, 사용자는 필요에 따라 v-model 또는 수동 바인딩과 이벤트 리스닝 중 하나를 선택할 수 있습니다. 가능한 경우 v-model 사용을 권장하며, 이는 코드 작성을 줄일 수 있기 때문입니다.

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">

    <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(event) {
            this.lastName = event.target.value;
        },
    }
}).mount('#app');

main.css

[v-cloak] {
    display: none;
}

# 9. listening to events

# 주제

9. listening to events

주제