공통

사실 @click과 v-on:click은 같다. 우린 효율을 추구하니까 @로 쓰자(모든 이벤트에 적용)

method에 event를 날려주고 싶을 땐 @change="method($event)"처럼 $을 붙여 날려준다!!!!!

EventClickView.vue

<template>
  <div>
    <button @click="increaseCounter">Add 1</button>
    <p>{{counter}}</p>
  </div>
</template>

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

<style>

</style>

@click

• @click="method"
• method에서는 this를 이용해 값을 가져옴

EventChangeView.vue

<template>
  <div>
    <!-- change 이벤트 및 v-model 작성 -->
    <!-- @change와 v-on:change 모두 가능 -->
    <!-- 매개변수로 event를 전달할 때는 $ 사용 -->
    <select
      v-on:change="changeCity($event)"
      v-model="selectedCity"
    >
      <option value="">==도시선택==</option>
      <option
        :value="city.cityCode"
        :key="city.cityCode"
        v-for="city in cityList"
      >
        {{city.title}}
      </option>
    </select>
    <!-- 첫 select 선택에 따라 달라지는 이중 select -->
    <select>
      <option
        :value="dong.dongCode"
        :key="dong.dongCode"
        v-for="dong in selectedDongList"
      >
        {{dong.dongTitle}}
      </option>
    </select>
    <!-- option에 직접 필터링 -->
    <!-- v-for에는 this 안 씀 -->
    <select>
      <option
        :value="dong.dongCode"
        :key="dong.dongCode"
        v-for="dong in dongList.filter(dong => dong.cityCode === selectedCity)"
      >
        {{dong.dongTitle}}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 첫 select에서 선택한 도시 코드
      selectedCity: '',
      cityList: [
        { cityCode: '02', title: '서울' },
        { cityCode: '042', title: '대전' },
        { cityCode: '064', title: '제주' }
      ],
      dongList: [
        { cityCode: '02', dongCode: '1', dongTitle: '서울 1동' },
        { cityCode: '02', dongCode: '2', dongTitle: '서울 2동' },
        { cityCode: '02', dongCode: '3', dongTitle: '서울 3동' },
        { cityCode: '02', dongCode: '4', dongTitle: '서울 4동' },
        { cityCode: '042', dongCode: '1', dongTitle: '대전 1동' },
        { cityCode: '042', dongCode: '2', dongTitle: '대전 2동' },
        { cityCode: '064', dongCode: '1', dongTitle: '제주 1동' },
        { cityCode: '064', dongCode: '2', dongTitle: '제주 2동' }
      ],
      // 두 번째 select option에 들어갈 동
      selectedDongList: []
    }
  },
  methods: {
    // 도시가 바뀔 때마다 바뀌는 selectedDongList
    // event 받을 때 매개변수 맘대로 지정 가능
    changeCity(evt) {
      console.log(evt.target.tagName)
      this.selectedDongList = this.dongList.filter(dong => dong.cityCode === this.selectedCity)
    }
  }
}
</script>

<style>

</style>

@change

• 변화가 일어났을 때마다 method 호출
• chageCity가 evt를 받아 출력하면 'SELECT'가 나옴(evt 확인 차 넣음)
  
• filter를 이용해 이중 select에도 문제가 없다.

v-for를 이용해 method 없이 직접 작성

• v-for 작성 시에는 this를 빼줌
• option에 바로 작성해도 되지만 가독성을 위해 method 활용하자!!!!

EventKeyView.vue

<template>
  <div>
    <!-- @keyup에 event 보내서 enter 키 확인 -->
    <input type="search" @keyup="checkEnter($event)" v-model="searchText">
    <button @click="doSearch">조회</button>
    <!-- @keyup.enter로 엔터 바로 확인 -->
    <!-- .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right, .ctrl.enter(컨트롤+엔터) 등 다양함 -->
    <input type="search" @keyup.enter="doSearch" v-model="searchText">
    <button @click="doSearch">조회</button>
    <!-- .stop - event.stopPropagation -->
    <!-- .prevent - event.preventDefault() -->
    <button type="submit" @click.prevent="doSearch">제출</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: ''
    }
  },
  methods: {
    doSearch() {
      console.log(this.searchText)
    },
    checkEnter(evt) {
      console.log(evt.key)
      // key가 enter면 doSearch 실행
      if (evt.key === 'Enter') {
        // method도 this 사용
        this.doSearch()
      }
    }
  }
}
</script>

<style>

</style>

@keyup

• method에서 다른 method를 사용하려면 this 붙이기
• evt.key === 'Enter'로 엔터 눌렸는지 확인 후 실행

@keyup.enter로 method 없이 doSearch 실행

• .enter: 엔터
• .up .down .left .right: 상하좌우
• .space .esc: 스페이스 esc
• .ctrl.enter: 컨트롤 + 엔터

event를 다루는 .prevent .stop

• click.prevent: 클릭했을 때 event.preventDefault() 후 method 실행
• .stop: 이벤트 발생 시 event.stopPropagation()로 부모 이벤트로의 이벤트 전달 막은 후 method 실행