Vue 이벤트 다루기

자바스크립트에서 이벤트를 다룰때 document객체의 여러 속성과 메서드를 조합해서 사용한다.

이벤트는 사용자와 상호작용해서 발생하는 사건
(마우스 클릭, 더블 클릭, 드래그 앤 드롭, 키보드)

1. v-on 디렉티브 : methods 옵션 속성으로 이벤트 연결. 이벤트 타입(click, keyup, keydown, doubleclick)

2. 이벤트 핸들러에 이벤트 객체를 전달하지 않으면, 이벤트 객체를 이벤트 핸들러가 처리하지 못한다. 이벤트 객체와 값을 함께 사ㅛㅇ하려면 $event와 값을 함께 넘겨주어야 한다.

 

3. modifier는 이벤트 처리 방식을 제어하는데 사용하는 기능. modifier를 사용하면 DOM이벤트 동작을 변경하거나 기능을 추가할 수 있다.

 

예제 : keyup 이벤트로 enter(숫자 13) 키 입력을 확인하면 별도의 동작을 취하도록 코드 작성

<script>

export default{

methods : {

onKeyupHandler(event){

if(event.keyCode == 13){

alert("enter키 눌렸네")

}

},

onKeyupHandler1(){

console.log("enter키 또 눌렸네~")

},

}

}

</script>

<!-- mustach syntax -->

<template>

<input type="text" @keyup="($event) => onKeyupHandler($event)">

<input type="text" @keyup.enter="onKeyupHandler1">

</template>

<style>

 

</style>

 

4. 뷰에서 이벤트와 함께 이해해야 하는 개념

• 반응성(reactivity) : 데이터의 변화를 감지하고 자동으로 화면UI를 업데이트 하는 기능
• 뷰에서는 자체적으로 반응성 시스템을 사용해서 변화를 감지하도록 구성되어 있어, 우리가 반응성 시스템을 이용하여 구현해야 한다.
• 뷰의 반응성 시스템 : 뷰 어플리케이션은 값이 바뀌면 이름 감지하고 화면을 렌더링한다. 이 과정에서 웹 브라우저는 새로고침이 발생하지 않는다. 이는 뷰의 반응성 때문에 변화된 값을 감지하고 해당값으로 인해 변경된 부분만 업데이트한다.

<script>

export default{

data(){

return{

number : 0,

}

},

methods : {

increasement(){

this.number +=5;

},

}

}

</script>

<!-- mustach syntax -->

<template>

<h1>{{ number }}</h1>

<button type="button" @click="increasement">증가</button>

</template>

<style>

 

</style>

 

5. v-once 디렉티브

• 경우에 따라 값이 변경되어도 화면을 업데이트 하지 않을 때 사용(정적 디렉티브)

<script>

export default{

data(){

return{

number : 0,

}

},

methods : {

increasement(){

this.number +=5;

},

}

}

</script>

<!-- mustach syntax -->

<template>

<h1 v-once>{{ number }}</h1>

<button type="button" @click="increasement">증가</button>

</template>

<style>

 

</style>

 

6. v-memo

• 렌더링 결과 저장.
• Vue3.2 이상에서만 지원.
• 메모지에이션(memoziation) : 이전에 계산된 결과를 저장해 놓고 중복 계산을 피하고 실행속도를 향상시킬 때 사용하는 프로그래밍 기술.
• template 태그에서 반복적으로 렌더링되는 요소에 v-memo 적용

<script>

export default{

data(){

return{

name : 'LJH',

gender : 'male',

age : 20,

}

},

}

</script>

<!-- mustach syntax -->

<template>

<div v-memo="[name, gender, age]">

<p>이름 : {{ name }}</p>

<p>성별 : {{ gender }}</p>

<p>나이 : {{ age }}</p>

</div>

<button type="button" @click="name='LSJ'">이름 변경</button>

<button type="button" @click="gender='female'">성별 변경</button>

<button type="button" @click="age=30">나이 변경</button>

</template>

<style>

 

</style>