Vue.js 기초 - 컴포넌트- 이벤트 처리

클릭 이벤트(v-on:click)

클릭 이벤트틑 v-on:clock=”메소드명” 혹은 @click=”메소드명”을 사용해서 추가할 수 있다.

<template>
    <div>
        <button type="button" @click="increaseCounter">Add 1</button>
        <p>The counter is :  </p>
    </div>
</template>
<script>
export default{ 
    data(){
        return{
            counter: 0
        };
    },
    methods:{
        increaseCounter(){
            this.counter = this.counter +1;
        }
    }
}
</script>

위 코드에서 버튼 객체를 클릭하면 클릭 이벤트를 호출하도록 되어있다.

클릭 이벤트를 통해 지정된 함수로 파라미터를 전달하고 싶다면 파라미터를 설정하면 된다.

    <button type="button" @click="setCount(7)">Set 7</button>
    <p>The counter is :  </p>

    methods:{
        setCount(counter){
            this.counter = counter;
        }
    }

Change 이벤트

change 이벤트는 @change=”메소드명”으로 사용한다.

Key 이벤트

Vue에서는 아래 코드와 같이 사용자로부터 특정 키가 입력되는지 아주 쉽게 처리할 수 있다.

<input @keyup.enter = "submit" />

vue에서는 다음과 같이 자주 사용되는 key 이벤트를 제공한다.

• .enter
• .up
• .down
• .tab
• .delete(키보드에서 Del키, Backspace키)
• .esc
• .space
• .left
• .right

Control, Shift, Alt 키와 같이 다른 키와 같이 사용되는 특수 키에 대해서는 다음과 같이 처리할 수 있다.

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>