[Vue.js] 在非 input 元素上(ex: div...)抓取鍵盤事件

要在 Vue.js 抓取鍵盤事件，我們可以使用其 Key Modifiers 來抓到，然後利用像這樣的方式來抓

@keyboardEvent.key="event"

比如我有一個 input：

<input type="text" @keyup.down="doSomething">

就可以在離開「下」的鍵盤時觸發事件。

可以用的 modifier 有這些：

• .enter
• .tab
• .delete (captures both "Delete" and "Backspace" keys)
• .esc
• .space
• .up
• .down
• .left
• .right
• .ctrl
• .alt
• .shift

可是如果在 div 上就沒辦法直接觸發，這時候就要在上面加上 tabindex='0' 的屬性，才能夠抓到 keyboard 事件，像是：

<div 
        @keydown.up="toUp"
        @keydown.down="toDown" 
        @keydown.left="toLeft"
        @keydown.right="toRight" 
        tabindex="0">
...
        </div>

給有需要的參考。