大家好，今天是鐵人賽的第16天，廢話不多說就進入今天的內容吧！
今天要說的是事件綁定v-on。
用法如下：

<template>
    <p>click:{{ addEvent }}</p>
    <button v-on:click="addEvent++">ClickBtn</button>
</template>
<script>
export default {
  data() {
    return {
      addEvent: 0,
    };
  },
};
</script>

事件名稱為click，每按一次Btn，{{ addEvent }}就會顯示，addEvent: 0為預設，按一次數字就會+1+1的顯示。
v-on:事件="運算式"也可以為@事件="運算式"

<template>
    <p>click:{{ addEvent }}</p>
    <button @click="addEvent++">ClickBtn</button>
</template>
<script>
export default {
  data() {
    return {
      addEvent: 0,
    };
  },
};
</script>

再來要說event：
當要監聽事件時會建立事件，像是preventDefault()、stopPropagation()皆是event提供。當v-on觸發事件時，如果沒指定參數，預設會將event當成參數。

<template>
    <button @click="clickBtn">clickBtn</button>
</template>
<script>
export default {
  methods: {
    clickBtn(event) {
      console.log(event.target.tagName)
    },
  },
};
</script>

讓btn觸發點擊事件時傳到methods中，同時取得預設傳入的event物件。
target：觸發事件元素
tagName：讀取屬性並調用元素的標籤
以上為今天的鐵人賽內如，感謝各位閱讀，明天見囉～