[Vue.js] - Vue v-on 디렉티브를 사용해서 이벤트(@click, @change, @keyup) 처리 하는 방법

#Vue v-on 디렉티브

-`v-on` 디렉티브는 Vue에서 이벤트 처리를 위해 사용되는 디렉티브입니다.

이 디렉티브를 사용하여 HTML 요소에 이벤트 리스너를 추가할 수 있습니다.

예를 들어, 클릭 이벤트를 처리하려면 `v-on:click` 또는 단축 표현인 `@click`을 사용합니다.

 

 

#vue v-on 디렉티브 종류

`v-on` 디렉티브는 Vue에서 다양한 종류의 이벤트 처리를 위해 사용됩니다. 

몇 가지 주요 `v-on` 디렉티브 종류는 다음과 같습니다:

1. `v-on:click`: 클릭 이벤트를 처리합니다.
2. `v-on:mouseover`: 마우스가 요소 위로 올라갈 때의 이벤트를 처리합니다.
3. `v-on:keydown`: 키보드의 키 다운 이벤트를 처리합니다.
4. `v-on:submit`: 폼 제출 이벤트를 처리합니다.
5. `v-on:input`: 입력 요소의 값이 변경될 때 이벤트를 처리합니다.
6. `v-on:focus`: 요소에 포커스가 될 때의 이벤트를 처리합니다.
7. `v-on:blur`: 요소로부터 포커스가 해제될 때의 이벤트를 처리합니다.
8. `v-on:scroll`: 요소의 스크롤 이벤트를 처리합니다.
9. `v-on:load`: 요소가 로드될 때의 이벤트를 처리합니다.

이 외에도 많은 다른 `v-on` 디렉티브가 있으며, 모든 HTML 이벤트에 대해 사용할 수 있습니다. 이벤트 이름은 camelCase 형식으로 작성되어야 합니다. 또한, 이벤트 수식어를 사용하여 이벤트 처리 동작을 변경할 수도 있습니다. 예를 들어 `.prevent` 수식어를 사용하면 기본 동작을 방지할 수 있습니다.

 

또한 v-on 디렉티브는 심볼 @로 사용도 가능합니다.

 

 

#Vue 클릭 이벤트(v-on:click) 사용 방법

 

-Vue.js 코드

@click: `@click`은 `v-on:click`의 축약형으로, Vue에서 클릭 이벤트를 처리하기 위해 사용하는 디렉티브입니다. 

`v-on:click`과 동일한 기능을 수행하지만, 더 간략한 문법을 제공하여 코드를 더 읽기 쉽게 만들어 줍니다.

<template>
    <div>
        <button type="button" @click="increseCount">더하기</button>
        <p>The count is : {{ count }}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                count: 0
            };
        },
        methods: {
            increseCount(){
                this.count = this.count + 1;
            }
        }
    }
</script>

 

-Vue 클릭 이벤트 테스트

더하기 버튼을 클릭하면 count가 1씩 증가하는 클릭 이벤트입니다.

 

 

#Vue Change 이벤트 사용 방법

 

-Vue.js 코드

@change: `@change`은 Vue에서 입력 요소의 값이 변경될 때 처리해야 하는 이벤트를 처리하기 위해 사용되는 디렉티브입니다. 주로 `<input>`, `<select>`, `<textarea>`와 같은 입력 요소에서 사용됩니다.

<template>
    <div>
        <select v-model="selectedValue" @change="changeSelect">
            <option value="사과">사과</option>
            <option value="바나나">바나나</option>
            <option value="딸기">딸기</option>
        </select>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                selectedValue: ''
            };
        },
        methods: {
            changeSelect(){
                alert(this.selectedValue);
            }
        }
    }
</script>

 

-Vue Change 이벤트 테스트

select box의 항목을 선택하면 해당 값이 포함된 알럿창을 호출되는 테스트입니다.

 

 

 

#Vue Key 이벤트(@keyup) 사용 방법

: `@keyup`은 Vue에서 키보드에서 키를 눌렀을 때 처리해야하는 이벤트를 처리하기 위해 사용하는 디렉티브입니다.

`v-on:keyup`과 동일한 기능을 수행하지만, 더 간략한 문법을 제공하여 코드를 더 읽기 쉽게 만들어 줍니다.

 

-vue @keyup 종류

- `.enter`: 엔터 키에 대한 이벤트 처리
- `.tab`: 탭 키에 대한 이벤트 처리
- `.delete`: 삭제(백스페이스 또는 딜리트) 키에 대한 이벤트 처리
- `.esc`: ESC 키에 대한 이벤트 처리
- `.space`: 스페이스바 키에 대한 이벤트 처리

 

-Vue.js 코드

<template>
    <div>
        <input type="text" @keyup.enter="handleEnter($event)" />
    </div>
</template>

<script>
    export default {
        methods: {
            handleEnter(event){
                const value = event.target.value;
                alert(value +' 입력');
            }
        }
    }
</script>

 

-Vue Key 이벤트(@keyup) 테스트

입력창에 안녕을 입력하고 enter키를 누르면 입력한 데이터가 담긴 알럿창을 호출하는 테스트입니다.