Vue 004 이벤트001 -클릭, 체인지, 키

클릭이벤트

• onClick, onKeydown 등등으로 이벤트를 만들었을 텐데
  vue에서는 앞에 @를 붙여 만들 수도 있고 (@click)
  앞에 v-on:을 붙여 만들수도 있다.(v-on:click) 골뱅이가 짧으니 골뱅이로 쓰도록 하자

<button @click="increaseCounter">Add1</button>

• vue에서 모든 함수는 method 안에 만들어야 한다.
• 데이터 기본값도 정해주고

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

결과

체인지 이벤트

주로 select, checkbox, radio에서 사용된다.

• 멀티설렉트

<template>
  <div>
    <!-- 도시 select -->
    <!-- 시티를 선택할때마다(change) selectedCity에 값을 보낸다(양방향 바인딩) -->
    <select @change="changeCity" v-model="selectedCity">
      <option value="">==도시선택==</option>
      <!--
        v-for를 사용해 cityList에 있는 값을 뿌려주고 각각을 city로 명한다.
        v-bind를 사용해 value 속성에 city.cityCode에 해당하는 city를 가져온다.
        v-bind를 사용해 유니크한 key속성을 city.cityCode에서 부여한다.
      -->
      <option
        :value="city.cityCode"
        :key="city.cityCode"
        v-for="city in cityList"
      >
      <!-- 각각 담긴 city에서 title만 뽑아 출력한다. -->
        {{ city.title }}
      </option>
    </select>
    <!-- 동 select -->
    <select>
      <!--
        v-for를 사용해 선택된 도시에 해당하는 동들을 불러오고 각각을 dong에 담는다.
        v-bind 를 사용해 value에 dongCode를 담는다.
        v-bind 를 사용해 유니크한 키값 dongCode를 담는다.
      -->
      <option
        :value="dong.dongCode"
        :key="dong.dongCode"
        v-for="dong in dongListFromSelectedCity"
      >
        {{ dong.dongTitle }}
      </option>
    </select>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      selectedCity: '', // 사용자가 선택한 city가 이곳에 들어감
      dongListFromSelectedCity: [], // 사용자가 선택한 city에 해당하는 dongList들이 들어감
      cityList: [
        { cityCode: '02', title: '서울' },
        { cityCode: '031', title: '경기' },
        { cityCode: '051', title: '부산' }
      ],
      dongList: [
        // cityCode로 걸러내서 dongCode와 dongTitle을 반환함
        { cityCode: '02', dongCode: '1', dongTitle: '서울1동' },
        ...
        { cityCode: '051', dongCode: '4', dongTitle: '부산4동' }
      ]
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    changeCity() {
      // dong.cityCode가 사용자가 선택한 cityCode와 같은 데이터를 뽑아온다.
      this.dongListFromSelectedCity = this.dongList.filter(
        (dong) => dong.cityCode === this.selectedCity
      )
    }
  }
}
</script>
<style scoped></style>

중간에 강사가 지정한 변수명때문에 너무 헷갈려서 내가 해석하기 편하게 지정해서 구현했다

결과

change이벤트를 써서 구현을 했는데 또 다른 방법이 있다. (함수내용을 직접 집어 넣는 방법)

<select>
  <!--
    두번째 select 태그는 change 이벤트를 가지고 전체 동리스트에서 사용자가 선택한 도시에 해당하는 동만 가져왔다
    아래 세번째는 아예 함수를 거치지 않고 직접 함수 내용을 집어넣어서 구현했다.
    데이터부분과 화면부분이 구분되어 있기 때문에 가능한 것
  -->
  <option
    :value="dong.dongCode"
    :key="dong.dongCode"
    v-for="dong in dongList.filter(
      (dong) => dong.cityCode === this.selectedCity
    )"
  >
    {{ dong.dongTitle }}
  </option>
</select>

// 가독성이 매우 떨어짐

함수 호출하면서 이벤트를 전달하는 방법. 이벤트 앞에 $를 붙여준다

함수($이벤트)

// 받아줄때는
함수(이벤트)

 

키 이벤트

버튼 클릭 뿐 아니라 엔터키에도 반응하는 서치바를 만드려고 한다.

<template>
  <div><!-- v-model로 양방향 바인딩  keyup이벤트를 사용해 checkEnter 함수를 확인한다.event를 보낸다.-->
    <input type="search" v-model="searchText" @keyup="checkEnter($event)">
    <button @click="doSearch">조회</button>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      sampleData: '*'
    }
  },
...
  methods: {
    doSearch() {
      console.log(this.searchText)
    },
    checkEnter(event) { // event를 받아주고
      if (event.keyCode === 13) { // 받은 keyup이벤트가(누른 키가) 13(엔터)가 맞다면
        this.doSearch() // doSearch함수를 호출하라
      }
    }
  }
}
</script>
<style scoped>

</style>

결과

안넘어다니고 enter키 바로 확인하기

vue에서는 @keyup.enter를 통해 바로 확인할 수 있다. 

함수를 만들지 않아도 된다!

<input type="search" v-model="searchText" @keyup.enter="doSearch">
<button @click="doSearch">조회2</button>

결과

• 주요 키에 대해서 바로 접근이 가능하다(저기 지금 보이는 거보다 더 많음 ctrl등등)

이벤트를 사용하는데.

• stop을 사용하면 event.stopPropagation()을 가능하다   오오오오오
• .prevent를 사용하면 event.preventDefault()를 사용할 수 있다 오오오오오오

 

 

 

무슨 일인지 파싱 에러가 나서 시간을 많이 잡아먹었는데 해결해보려다가 계속 더 미궁으로 빨려들어가는 기분이 들기도 하고, 어디서부터 다시 고쳐야하는지 까먹어서 어제 커밋한거 불러와서 오류해결(?)

조금씩 복잡해지려고 하는 모습이 보여서 해당 코드 바로위에 코멘트를 달아서 몇번이고 읽어봤다 이리 저리 따라가면서 구조를 이해하기 편하도록 했다

강의가 여기서 끝나버렸는데 내일부터는 뭐해야 더 배울 수 있지? 

제 글을 읽으신 당신!

뭐라도 좀 알려줘봐주세요 제발요