vue.js) event

# click 이벤트

* vue에서는 이벤트 속성앞에 on이 아니라 @ 를 붙이면 됨.

<template>
  <div>
    <button @click="increaseCounter">Add 1</button>
    <p>{{ counter }}</p>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      counter: 0
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    increaseCounter() {
      this.counter += 1
    }
  }
}
</script>

 

# change 이벤트

* 이벤트 앞에 @이 안 붙이고

v-on:change 이렇게 붙여도 됨. 

* 2번째 셀렉트를 change 이벤트를 다루는 함수 없이 

 1번째 셀렉트 태그에서 도시값이 지정이 되면 

 태그내에서 그냥

 그 지정된 값으로 바로 filter 함수를 통해 해당하는 도시의 동에 해당하는 option 태그를 그려낼 수 있다. 

 3번째 셀렉트가 바로 이 내용.

( 그렇지만 가독성을 위해서는 그냥 change 이벤트를 이용해서 표현해주는게 좋다. 

  그래야 내 코드를 다른 개발자가 봤을 때 이해하기 더 좋다 )

* vue에서  이벤트를 다루는 함수에 event 전달하는 법

- vue 에서는 event 함수에 event 객체를 전달하려면 

 매개변수에 $event 이렇게 넣어줘야 함. 

event 객체를 받는 부분의 이름은 마음데로 해도 됨. ( 위에 빨간 줄 부분)

<template>
  <div>
    <select name="" id="" @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 name="" id="">
      <option :value="dong.dongCode" :key="dong.dongCode" v-for="dong in selectedDongList">{{dong.dongTitle}}</option>
    </select>
    <select name="" id="">
      <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 {
  components: {},
  data() {
    return {
      selectedCity: '',
      cityList: [
        {cityCode:'02', title:'서울'},
        {cityCode:'051', 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: '051', dongCode:'1', dongTitle:'부산 1동'},
        {cityCode: '051', dongCode:'2', dongTitle:'부산 2동'},
        {cityCode: '051', dongCode:'3', dongTitle:'부산 3동'},
        {cityCode: '064', dongCode:'1', dongTitle:'제주 1동'},
        {cityCode: '064', dongCode:'2', dongTitle:'제주 2동'}
      ],
      selectedDongList: []
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    changeCity(event){
      console.log(event.target.tagName)
      this.selectedDongList = this.dongList.filter((dong) => dong.cityCode === this.selectedCity)
    }
  }
}
</script>

 

# key 이벤트

* keyup 등 key 관련 이벤트에서 

  @keyup.enter 이나 @keyup. 찍으면  누른키가 enter일 때 혹은 delete키나 그외 등등 해당하는 키가 눌러졌을 때

 함수를 실행하도록 바로 설정해줄 수 있다.

* 태그가 고유한 이벤트를 중지 시키고 싶을 때는

아래  submit 타입의 button 부분을 보면

 @click.prevent 처럼 써주면 

 원래 함수내에서 e.perventDefault() 를 선언해준것과 같은 효과를 낼 수 있다.

 

@click.stop 을 쓰면 e.stopPropagation() 과 같은 효과를 내줌

 

★ e.preventDefault는 고유 동작을 중단시키고, e.stopPropagation 는 상위 엘리먼트들로의 이벤트 전파를 중단시킨다.

<template>
  <!-- <div>
    <input type="search" name="" id="" @keyup="checkEnter($event)" v-model="searchText">
    <button @click="doSearch">조회</button>
  </div> -->
  <div>
    <input type="search" name="" id="" @keyup.enter="doSearch" v-model="searchText">
  <button @click="doSearch">조회</button>
  <button type="submit" @click.prevent="doSearch"></button>
  </div>
</template>
<script>
// .enter
// .tab
// .delete
// .esc
// .space
// .up
// .down
// .left
// .right
// .stop - event.stopPropagation() 
// .prevent - event.preventDefault() (태그 고유 이벤트 중지 효과)
export default {
  components: {},
  data() {
    return {
      sampleData: ''
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    doSearch() {
      console.log(this.searchText)
    },
    checkEnter(event) {
      // event.stopPropagation();
      if(event.KeyCode === 13){
        this.doSearch()
      }
    }
  }
}
</script>

# 기억할것 ( 위 코드에서 함수 내에서 다른 함수 호출하는 부분 보기)

* script 내에서

object 안에 있는것 ,

data 든 메서드든 호출하려면 

this 키워드로 호출해야 함.