通常聊天都會習慣直接輸入Enter送出訊息，而且我們介面上也完全沒有要做按鈕ＸＤ當然要偽裝terminal也是直接用鍵盤送出～這篇就來做事件處理

平常會用addEventListener來做偵聽

document.addEventListener('click', func)
document.addEventListener('keyup', func)

不過vue有直接提供v-on事件處理，平常會用到click、keyup、dbclick這些事件，在vue裡都是用v-on做事件綁定，這樣也不需要一直做addEventListener，方便許多

<button v-on:click="func">按鈕</button>
<input type="text" v-on:keyup="func" />

並且也有提供省略的寫法v-on:改成@

<button @click="func">按鈕</button>
<input type="text" @keyup="func" />

<script>
  export default {
    methods: {
      func(){ // 觸發事件
        console.log('abc')
      }
    }
  };
</script>

延續上篇，把input加上鍵盤事件

<input type="text" v-model="memberName" @keyup="keyHandler" />

<script>
  export default {
    data(){
      return {
        memberName: ''
      }
    },
    methods: {
      keyHandler(e){ 
        console.log(e.keycode)
      }
    }
  };
</script>

只要在input中輸入任何按鍵，就會觸發keyHandler()，e.keyCode可以判斷是按哪個鍵，以前判斷ENTET會用e.keycode===13，不過目前這個用法要廢棄了，現在直接判斷e.key==='Enter'就可以嚕

需要查什麼鍵盤按鍵可以到這裡

不過呢，說了這麼多，最後都沒有要用（被打）

最後要用的是vue提供的語法糖@keyup.enter

<input type="text" v-model="memberName" @keyup.enter="keyHandler" />

這樣就只會在輸入enter之後觸發事件，棒棒！

最後曬個手作檸檬蛋糕

雖然是失敗作