今天來看看超好用的v-on吧！
v-on是指令監聽DOM事件，並在觸發時執行指定的行為，例如滑鼠點擊事件，現在不明白字面上意思沒關係，來幾個簡單範例就能明白了！

v-on範例實做

先來做個小隊搶答積分版，一共分為三小隊：

<template>
  <div class="news">
    <h1>小隊搶答積分賽！</h1>
      <ul>
        <li>
          <h3>紅隊</h3>
          <button v-on:click="counter += 1">加1分</button>
          <p>總分 {{ counter }}</p>
        </li>
        <li>
          <h3>藍隊</h3>
          <button v-on:click="counter += 1">加1分</button>
          <p>總分 {{ counter }}</p>
        </li>
        <li>
          <h3>黃隊</h3>
          <button v-on:click="counter += 1">加1分</button>
          <p>總分 {{ counter }}</p>
        </li>
      </ul>
  </div>
</template>

我簡單用個<ul><li>分出三個小隊，並在每隊下方加入加分按鈕、計分版，我們先從<button>開始看吧：

• v-on:click當按鈕按下時，它跟v-bind一樣，都能使用簡寫，但不同的是它用@，也就是@click，之後我都會改為這樣寫，接下來counter += 1是累計加1，怎麼說+=是累計呢，這又是個簡寫囉其實它因該是長這樣counter = counter + 1我特別把數字寫在上面會比較好了解，「counter(1) = counter(1) + (1)」相加完counter就變成2了，接著「counter(2) = counter(2) + (1)」這次加完就變3了對吧！那麼接下來依此類推下去，就變成一直累加下去囉！
• {{ counter }} 還記得怎麼綁定資料嗎？忘記再來回顧一下資料綁定吧！( https://ithelp.ithome.com.tw/articles/10201593 )

很容易吧！當然你還能利用function做出更多滑鼠點擊後的事件！

v-on事件修飾符

接著再介紹5個v-on的「事件修飾符(Event Modifiers)」讓你輕鬆做出實用的功能(修飾符是由點開頭)，我就直接使用@click做範例：

• @click.stop 阻止點擊事件繼續向父層觸發。
• @click.prevent 阻止瀏覽器預設行為，例如：

<template>
  <div class="news">
    <a href="https://www.google.com.tw/" @click.prevent="prevent">google</a>
  </div>
</template>

<script>
  export default {
    methods: {
      prevent() {
        alert('不會觸發連結')
      }
    }
  }
</script>

簡單補充說明：methods是用來放要執行的function，而且只要相關data有變動就會重新計算，之後再來特別深入了解。

• .capture 反向觸發事件！讓元件本身(父層)的觸發事件先處理，然後才觸發內部元件(子層)，例如：

<template>
  <div @click.capture="father">
    <a @click.capture="child">按鈕</a>
  </div>
</template>

<script>
  export default {
    methods: {
      father() {
        alert('觸發父層')
      },
      child() {
        alert('觸發子層')
      }
    }
  }
</script>

• .self 只觸發event.target(目標事件)為元件本身時，很難懂對吧，來個例子，以下只有child是event.target：

<template>
  <div @click.self="father">
    <div @click="middle">
      <a @click="child">按鈕</a>
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      father() {
        alert('觸發父層')
      },
	  middle() {
		alert('觸發中層')
	  },
      child() {
        alert('觸發目標事件按鈕')
      }
    }
  }
</script>

從上方範例可見，當.self在father時，只有child(event.target)和middle會被觸發。
那如果在child(event.target)呢？當然3個都會被觸發，記得上面說的嗎？它會觸發event.target元件。

• .once：只有在第一次按下時會被觸發，不能重覆觸發。
• .native：偵聽元件的原生事件。

以上5個「事件修飾符」都能加疊使用，它們是依序產生效果的，因此順序會影響結果，比如說：
<a href="https://www.google.com.tw/" @click.prevent.self>按鈕</a>會阻止所有的點擊事件，因為.prevent先被使用了。

以上就是今天的學習內容~！