[개발자의품격][부트캠프][1기][19차시] Vue.js #3 | event

event

click

<template>
  <div>
    <button @click="increaseCounter">Add 1</button>
    <!-- 함수를 호출하지 않고 click 속성에 바로 적용할 수도 있다. -->
    <!-- <button @click="counter += 1">Add 1</button> -->
    <p>{{ counter }}</p>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increaseCounter() {
      this.counter += 1
    }
  }
}
</script>

 

[그림 1] click 이벤트, "Add 1" 클릭시 1씩 증가한다.

 

---

 

change

change 이벤트를 가장 많이 사용하는 경우는 selectbox에서 이다.

<template>
  <div>
    <select name="" id="" v-model="selectedCity" @change="changeCity">
      <option value="02">서울</option>
      <option value="051">부산</option>
      <option value="064">제주</option>
    </select>
    <select name="" id="">
      <option value="" :key="dong.code" v-for="dong in dongList">
        {{ dong.title }}
      </option>
    </select>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      selectedCity: '',
      dongList: []
    }
  },
  methods: {
    changeCity() {
      console.log(this.selectedCity)
      if (this.selectedCity === '02') {
        this.dongList = [
          { code: '1', title: '서울 1동' },
          { code: '2', title: '서울 2동' },
          { code: '3', title: '서울 3동' }
        ]
      } else if (this.selectedCity === '051') {
        this.dongList = [
          { code: '1', title: '부산 1동' },
          { code: '2', title: '부산 2동' },
          { code: '3', title: '부산 3동' }
        ]
      } else if (this.selectedCity === '064') {
        this.dongList = [
          { code: '1', title: '제주 1동' },
          { code: '2', title: '제주 2동' },
          { code: '3', title: '제주 3동' }
        ]
      }
    }
  }
}
</script>

 

[그림 2] change 이벤트

 

※ 데이터 건수가 많지 않을 때는 한 번에 다 가져오는 것이 유리하다. 따라서 실무에서는 change 이벤트 대신 filter 함수를 이용한다.

<template>
  <div>
    <select name="" id="" v-model="selectedCity">
      <!-- change 이벤트 대신 filter 함수 이용 -->
      <option
        :value="city.cityCode"
        :key="city.cityCode"
        v-for="city in dongList.filter((d) => d.dongCode === '1')"
      >
        {{ city.cityTitle }}
      </option>
    </select>
    <select name="" id="">
      <option
        :value="dong.dongCode"
        :key="dong.dongCode"
        v-for="dong in dongList.filter((d) => d.cityCode === selectedCity)"
      >
        {{ dong.dongTitle }}
      </option>
    </select>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      selectedCity: '',
      dongList: [
        {
          cityCode: '02',
          cityTitle: '서울',
          dongCode: '1',
          dongTitle: '서울 1동'
        },
        {
          cityCode: '02',
          cityTitle: '서울',
          dongCode: '2',
          dongTitle: '서울 2동'
        },
        {
          cityCode: '02',
          cityTitle: '서울',
          dongCode: '3',
          dongTitle: '서울 3동'
        },
        {
          cityCode: '051',
          cityTitle: '부산',
          dongCode: '1',
          dongTitle: '부산 1동'
        },
        {
          cityCode: '051',
          cityTitle: '부산',
          dongCode: '2',
          dongTitle: '부산 2동'
        },
        {
          cityCode: '051',
          cityTitle: '부산',
          dongCode: '3',
          dongTitle: '부산 3동'
        },
        {
          cityCode: '064',
          cityTitle: '제주',
          dongCode: '1',
          dongTitle: '제주 1동'
        },
        {
          cityCode: '064',
          cityTitle: '제주',
          dongCode: '2',
          dongTitle: '제주 2동'
        },
        {
          cityCode: '064',
          cityTitle: '제주',
          dongCode: '3',
          dongTitle: '제주 3동'
        }
      ]
    }
  }
}
</script>

 

---

 

key

<template>
  <div>
    <!-- @keyup에서 keyCode 확인하는 함수 없이 @keyup.enter로 엔터키 감지 가능 -->
    <input type="search" name="" id="" @keyup.enter="doSearch()" />
    <!-- <input type="search" name="" id="" @keyup="checkEnter(event)" /> -->
    <button @click="doSearch">조회</button>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      sampleData: ''
    }
  },
  methods: {
    doSearch() {
      console.log('doSearch 실행')
    }
    // },
    // checkEnter() {
    //   if (event.keyCode === 13) {
    //     this.doSearch()
    //   }
    // }
  }
}
</script>

 

[그림 3] key 이벤트 엔터 감지