[vue]이벤트 처리

@click(counter 숫자 증감 버튼)

<template>
  <button type="button" @click="increaseCounter">
    (+1)
  </button>
  <button type="button" @click="decreaseCounter" 
          v-bind:disabled="counter == 0">
    (-1)
  </button>
  <!--숫자가 0일시 비활성화-->
  <p>{{ counter }}</p>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      counter: 0,
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    increaseCounter() {
      this.counter += 1;
    },
    decreaseCounter() {
      this.counter -= 1;
    },
  },
};
</script>

---

@change

<template>
  <select v-model="fruit" @change="changeSelect">
    <option value="사과">사과</option>
    <option value="바나나">바나나</option>
    <option value="딸기">딸기</option>
  </select>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      fruit: "사과",
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    changeSelect() {
      alert(this.fruit);
    },
  },
};
</script>

---

@keyup 중... @keyup.enter

<template>
  <input type="text" v-model="textValue" @keyup.enter="showValue" />
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      textValue: "",
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    showValue() {
      //tab, delete, esc, space, up, down, left, right
      alert(this.textValue);
    },
  },
};
</script>

---

이벤트 여러개 호출하기

<template>
  <button type="button" @click="one(), two()">여러 이벤트 호출법</button>
  <p>count : {{ counter }}</p>
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {};
  },
  methods: {
    one() {
      alert("one");
    },
    two() {
      alert("two");
    },
  },
};
</script>