Vue 이벤트 처리 방법(v-on)

 

Vue 컴포넌트에서 이벤트 처리를 할 때는 v-on 디렉티브를 사용한다. v-on 디렉티브는 심볼 @로 대체 가능하다. 

 

 

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

v-on:click="메소드명" 혹은 @click="메소드명"

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

 

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

<template>
  <div>
    <button type="button" @click="setTen(10)">Set 10</button>
    <p>set : {{ number }} </p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        number: 0
      };
    },
    methods: {
      setTen(number) {
        this.number = number;
      }
    }
  }
</script>

 

클릭 이벤트 발생 시 여러 개의 함수를 호출하고 싶다면,

<template>
  <div>
    <button type="button" @click="one(), two()">Click</button>
  </div>
</template>
<script>
  export default {
    methods: {
      one() {
        alert('One');
      },
      two() {
        alert('Two');
      }
    }
  }
</script>

 

 

 

Change 이벤트

@change="메소드명"

<template>
  <div>
    <select v-model="selectedValue" @change="changeSelect">
        <option vlaue="서울">서울</option>
        <option vlaue="부산">부산</option>
        <option vlaue="제주">제주</option>
    </select>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selectedValue: ''
      };
    },
    methods: {
      changeSelect() {
        alert(this.selectedValue);
      }
    }
  }
</script>

 

 

 

Key 이벤트

엔터키가 입력되는지 감시하다가 엔터를 치면 조회 버튼이 눌리게 한다거나.. 이런것!

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

주로 사용하는 key 이벤트

.enter

.up

.tab

.down

.delete

.left

.esc

.right

.space

다른 키와 함께 사용되는 특수키는

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

//Ctrl + Click
<div @click.ctrl="doSomething">Do sth</div>

 

 

 

computed 와 watch

Vue 인스턴스 내에 정의된 데이터 값에 변경이 일어나는지 감시하고, 변경될 때 정의된 함수가 실행된다.

• computed는 vue 인스턴스 내에 정의된 데이터 값과 연관된 또 하나의 데이터를 정의해서 사용할 수 있게 한다. 아래 예시에서 firstName or lastName 중 하나라도 변경이 있으면 fullName 함수도 자동으로 실행되고, 값이 갱신된다. computed에 정의해서 사용하면 화면 내 여러 곳에서 fullName을 사용하더라도 이에 대한 연산은 한 번만 일어난다. 

<template>
  <div>
    <h1>Full Name: {{ fullName }} </h1>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        firstName: 'Jiyeong',
        lastName: 'Park'
      };
    },
    computed: {
      fullName() {
        return this.firstName + ' ' + this.lastName;
      }
    }
  }
</script>

• watch

computed와 차이점은, computed는 기존에 정의된 값을 기반으로 새로운 데이터 값을 활용하기 위함이라면, watch는 watch에 정의한 데이터 값 하나만을 감시하기 위한 용도로 쓰인다. 또한 실제 데이터 변경이 일어나기 전까지는 실행되지 않는다. 지켜보고 있는 인스턴스가 초기 할당값에 변경이 일어나야만 watch가 실행된다. 즉, 초기 할당 값에 변화가 있을 때만 watch에 정의한 함수를 실행한다.

<template>
  <div>
    <h1>Full Name: {{ fullName }} </h1>
    <button type="button" @click="changeName">변경</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        firstName: 'Jiyeong',
        lastName: 'Park',
        fullName: ''
      };
    },
    methods: {
      changeName() {
        this.firstName = '상철';
      }
    },
    computed: {
      fullName() {
        return this.firstName + ' ' + this.lastName;
      }
    },
    watch: {
      firstName() {
        this.fullName = this.firstName + ' ' + this.lastName
      },
      lastName() {
        this.fullName = this.firstName + ' ' + this.lastName
      }
    }
  }
</script>