Vue.js v-on 縮寫@

在輸入框按下enter時，觸發事件。

<input type="text" class="new-todo" v-on:keyup.enter="handleKeyup">

syntax: v-on:事件.modifier="呼叫函式"
事件處理流程:

1. 選取特定的DOM元素
2. 監聽 該元素的keyup事件。
3. 篩選 來自enter按鈕的keyup事件
4. 定義 觸發事件時，要呼叫的函式

• 把v-on放在元素上即完成監聽。
• 專用修飾符 modifier
• 所呼叫的函式，稱為"事件處理器 event handler"，即監聽器裡的callback function。

<input type="text" v-model="newTodo" v-on:keyup.enter="handleKeyup(newTodo)">

1. v-model雙向綁定輸入框和newTodo資料。
2. v-on 監聽keyup事件，在輸入框按下enter後，事件處理器即handleKeyup函式，把newTodo資料作為參數帶入函式，cosole.log即可印出輸入框的內容。

事件發生時，通常會有一個event物件。
Vue.js 以特殊變數 $event 來拿到event物件。

HTML

<input type="text" v-model="newTodo" 
v-on:keyup.enter="handleKeyup(雙向綁定的輸入框資料為變數newTodo, 事件發生會有的event物件 $event)">

JS 函式寫在methods內

method: {
   handleKeyup(參數名稱keyname, 參數名稱event) {
   console.log(keyname, event)
}

收合按鈕綁事件

<input id="toggle-all" type="cjeckbox" class="toggle-all">
<label for="toggle-all" @click="clickToggleAll($event)">

JS

methods: {
  clickToggleAll(event) {
    console.log(event)
  }
}

注意:

• 事件綁在 <label> 上。
• @事件="函式" 要把 $event帶入參數，才能印出event資料。若帶入event，會得到 undefined。