接續昨天的鍵盤事件，今天要來進行一個小的實作，學習如何監聽按鍵keydown DOM事件並配合按鍵修飾子一起使用。要做一個能讓使用者用鍵盤按鍵「上下左右」移動的方塊。
需要的功能或物件：

• 建立一塊方塊（CSS）
• 監測使用者按鍵盤「上下左右」的動作，使方塊能跟著移動

<div id="app">
     <input 
       class="item"
       value="移動"
       @keydown.up="moveY(-10)"
       @keydown.down="moveY(10)"
       @keydown.left="moveX(-10)"
       @keydown.right="moveX(10)"
       :style="{top:`${top}px`, left:`${left}px`}"
     />
</div>

<script>
   var app = Vue.createApp({
       data:function(){
           return{
              top:50,
              left:50,
           };
       },
       methods: {
          moveY(value){
             this.top+=value;j
          },
          moveX(value){
             this.left+=value;
          }
       },
   })
   app.mount('#app');
</script>

CSS：

#app {
    padding:2rem;
}

.item {
    width: 200px;
    height: 200px;
    background: rgb(229, 108, 185);
    border: 2px #999 solid;
    text-align: center;
    top: 40px;
    left: 40px;
    position: absolute;
}

執行結果（需先點擊才能移動方塊）：

說明：
首先，一樣先建資料模型（Data），在Data裡建立top及left屬性，用來記錄方塊的位置。

• top：紀錄方塊距離視窗上方的距離（50）。
• left：紀錄方塊距離視窗左方的距離（50）。

methods裡：

• moveX(value)：更新方塊在頁面中橫軸的位置，如果value為正數，方塊會往右移動；value為負數，方塊會往左移動。
• moveY(value)：更新方塊在頁面中縱軸的位置，如果value為正數，方塊會往下移動；value為負數，方塊會往上移動。

HTML＜input＞裡：
方塊要能移動，需要利用CSS中的top及left屬性幫方塊定位。
:style="{top:${top}px, left:${left}px}"：以v-bind:style的方式（程式碼為縮寫:style），將CSS裡top及left的數值綁定Data裡的top和left屬性。

監聽使用者的動作：
用鍵盤事件keydown監聽使用者，配合up、down、left、right修飾子監聽使用者按的是哪個按鍵。