Event handling(vue)

methods

<template>
  <div>add method = {{ add(2, 3, 4) }}</div>
  <div>add method = {{ add(10, 4, 6) }}</div>
  <div>multiply method = {{ multiply(baseValue) }}</div>
</template>

<script>
export default {
  data() {
    return {
      baseMultiplier: 5,
      baseValue: 2,
    };
  },
  methods: {
    add(a, b, c) {
      return a + b + c;
    },
    multiply(num) {
      return num * this.baseMultiplier;
    },
  },
};
</script>

 

EVENT

<template>
  <div>
    {{ name }}
    <button @mouseover="name = 'batman'">nameChange</button>
  </div>
  <div>
    {{ count }}
    <button v-on:click="count += 1">increase</button>
    <button v-on:click="count -= 1">decrease</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "vavara",
      count: 0,
    };
  }
};
</script>

 

다중 이벤트 처리

- 한개의 이벤트는 함수형태로 적지 않아도 되지만 다중 이벤트의 경우는 함수형태로 적어줘야 한다. 

    <button @click="toggle">Test</button>
    <button @click="toggle(), increaseNumber()">Toggle</button>

 

<template>
  <div>
    {{ name }}
    <button @click="changeName($event), increase(1, $event)">nameChange</button>
  </div>
  <div>
    {{ count }}
    <button v-on:click="increase(1)">increase 1</button>
    <button v-on:click="increase(5)">increase 5</button>
    <button v-on:click="decrease(1)">decrease 1</button>
    <button v-on:click="decrease(5)">decrease 5</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "vavara",
      count: 0,
    };
  },
  methods: {
    changeName(event) {
      this.name = "batman";
      console.log("event: ", event);
    },
    increase(num, event) {
      this.count += num;
      console.log("event: ", event);
    },
    decrease(num) {
      this.count -= num;
    },
  },
};
</script>