v-on 觸發事件

v-on 觸發表達式

利用 v-on 來監聽 DOM 元素。
我們可以在 v-on 的內容中加入表達式，當你觸發 v-on 綁定事件，就會去執行裡面的表達式內容。

<div id="app">
 <div>{{ count }}</div>
 <button @click="count -= 1">-1</button>
 <button @click="count += 1">+1</button>
</div>

<script>
 new Vue({
   el: '#app',
   data: {
     count: 0
   }
 })
</script>

v-on 觸發 methods 事件

利用 v-on 來綁定觸發一個 methods 的事件。
methods 裡面的事件預設都會傳入 event 這個參數。

---HTML---
<button @click="eventHandler">新增</button>

---JavaScript---
<script>
  new Vue({
    el: '#app',
    data: {
	  count: 0
	},
	methods: {
	  eventHandler(event) {  // 預設會傳入目標元素的 event 
	  	console.log(event.target.tagName) 
	  }
	}
  })

</script>

前綴詞

可以利用 Vue 提供的一些前綴詞，來達到像是 event.preventDefault() 或 event.stopPropagation() 這種效果。

1
2
3

<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent="onSubmit"></form>

self 前綴詞，指定觸發元素

這個前綴詞很適合用在巢狀結構。

---HTML--- 
<div @click="nestClick" style="border:1px solid;">
  <a href="#">
    <button>button</button>
  </a>
</div>

---JavaScript---
new Vue({
  el: '#app',
  methods: {
  	nestClick(event) {
  	  console.log(event.target)	
	}
  }
})

以上這個範例當你點擊 div 區塊時，會回傳 div 區塊的內容，但是，你點擊 button 也會回傳按鈕內容，但是，這不是我們要的，因為，我們只想要回傳 div 的內容，所以，這個時候，你就可以在 div 區塊的 click 上加入 self 的前綴，來指定只有 div 才會觸發。

---HTML--- 
<div @click.self="nestClick" style="border:1px solid;">  // 指定只有 div 才會觸發 
  <a href="#">
    <button>button</button>
  </a>
</div>

用 self，只讓指定元素觸發

我們改寫一下上面的範例

---HTML--- 
<div @click.self="nestClick(1)" style="border:1px solid;">
  <a @click.self="nestClick(2)" href="#">
    <button @click.self="nestClick(3)">button</button>
  </a>
</div>

我們將巢狀內每個元素當加入 self 前綴詞，這樣的話，就會在我們點擊特定的元素時，才會傳入相對應的內容，不會被冒泡或捕獲事件所影響。

鍵盤的 keyCode

在 Vue 中有提供了 keyCode 屬性，來達成當使用者輸入特定的鍵盤按鍵時，會觸發相對應的內容。

Alex宅幹嘛 - 眉眉角角

當 methods 有傳入其他參數時，就不會自動傳入 event 參數

ex:

---HTML---
<button v-for="(num, index) of 4" @click="eventHandler(index)"> {{ num-1 }}</button>

---JavaScript---
<script>
  new Vue({
    el: '#app',
    data: {
	  count: 0
	},
	methods: {
	  eventHandler(index, event) {
	  	console.log(index, event) 
	  }
	}
  })
</script>

以上這個範例，你可以看到當我們點擊按鈕時，會傳入當下的 index ，那觸發的事件中除了 index 參數以外，還有另一個 event 參數，這時，該 event 的 console 結果為 undefined。
這時，我們就可以知道，當你 methods 有傳入其他參數時，就不會自動傳入 event 參數。
若這時，我們還是想要取得觸發此事件的目標元素的 event 時，我們就需要在觸發事件的參數加入 $event。

1 2	---HTML--- <button v-for="(num, index) of 4" @click="eventHandler(index, $event)"> {{ num-1 }}</button> // 加入 $event

你可以看到我們有加入 $event，這樣我們就可以在 eventHandler 取得目標元素的 event 內容囉。
那 $event 有 $ 字號的原因是，要告訴它這是 Vue 的功能，若你只有單純寫 event 的話，會變成傳入 event 這個參數，跟我們想要的結果完全不一樣喔，要注意。

scroll 事件監聽優化

在 Vue 中有提供 passive 這個前綴詞，用來優化像是 scroll 或 resize 這種會被使用者連續觸發的事件。當加入這個 passive 的前綴詞之後，可以讓 scroll 不那麼敏感，也就是不會一直連續觸發，用來優化該事件的效能。
那 Alex 大大有講，他自己比較少用，他會自己寫 scroll 優化的部分。
那他有講了，在 JS 原生語法的 addEventListener 中，MDN的passive文章，有提供 passive 這個參數，也是用來優化 scroll 這種會被連續觸發的事件。

keyup 的雷

在 Vue 的官方文件中有特別提到，當你要用 keyup 綁定複合式按鍵，像是 ctrl + 67 (它是 ctrl + c) 這種，你得要 ctrl 按著，只放開 c 鍵，此時，該 keyup 的事件才會被觸發。若你連 ctrl 都放開的話，這個 keyup 事件會沒用。
官方文件也說明了，如果，你想要避免上述的這種狀況，你就要把 ctrl 改成用它的 keyCode 來寫，即改成 @keyup.17.67="eventHadler" ，這樣的寫法才行。

自動銷毀 addEventListener

在 Vue 中，雖然有提供了很多的監聽事件，但是，終究還是有些監聽事件我們得自己寫，像是 resive 事件。
那我們我們通常會在該 Vue 元件的 mounted 的 Hook中，加入我們想為它綁定的 addEventListener 事件。
但是，要千萬記得，在該元件的 beforeDestroy 的 Hook ，要將我們綁定的 addEventListener 作解綁喔，不然它會占用記憶體空間。

new Vue ({
  el: '#app',
  methods: {
    resizeHandler () {
    	
	}
  },
  mounted () {
  	window.addEventListener('resize', resizeHandler)  // 為該元素綁上 resize 事件
  },
  beforeDestroy () {
  	window.removeEventListener('resize', resizeHandler)  // 解綁 resize 事件 
  }
})

Landy Blog

Vue-v-on觸發事件