title: Using keypress() to control all Vue interactions
body: <p>I'm rewriting a game from Javascript/jQuery to Vue. The game does not use the mouse, everything is controlled by the keyboard.</p>
  
  <p>The player uses the "up" and "down" arrows the cycle through the buttons, the "enter" key to select, and the "back" arrow to go back.</p>
  
  <p>Each time the player selects an option, data is stored in a "game" array so that when the game is played, it can display the correct game and players.</p>
  
  <p>So my question is, what would be the standard way to construct this in Vue?</p>
  
  <p>I have read that if you are using jQuery to do DOM manipulation in a Vue project you are doing something wrong, but I don't know any other way to get keypress() to work across all pages the way it works in jQuery.</p>
  
  <p><strong>This is how the page was currently constructed (to work with Javascript/jQuery):</strong></p>
  
  <pre><code>// this is the first page the player sees
  &lt;div class="page1"&gt;
      &lt;div class="button button_selected" data-link="choosegame"&gt;Choose a game&lt;/div&gt;
      &lt;div class="button" data-link="highscores"&gt;Highscores&lt;/div&gt;
      &lt;div class="button" data-link="settings"&gt;Settings&lt;/div&gt;
  &lt;/div&gt;
  
  // if the player selects "choose a game", it shows this page:
  &lt;div class="choosegame"&gt;
      &lt;div class="button" data-link="chooseplayers" data-options="{game:'checkers',players:'2',playersmax:'2'}"&gt;Checkers&lt;/div&gt;
      &lt;div class="button" data-link="chooseplayers" data-options="{game:'bingo',playersmin:'2',playersmax:'4'}"&gt;Bingo&lt;/div&gt;
      &lt;div class="button" data-link="chooseplayers" data-options="{game:'scrabble',players:'2',playersmax:'2'}"&gt;Scrabble&lt;/div&gt;
  &lt;/div&gt;
  
  // if the player selects a game (ex. checkers), it shows this page:
  &lt;div class="chooseplayers"&gt;
      &lt;div class="button" data-link="playgame" data-options="{player:'Jimmy'}"&gt;Jimmy&lt;/div&gt;
      &lt;div class="button" data-link="playgame" data-options="{player:'Billy'}"&gt;Billy&lt;/div&gt;
      &lt;div class="button" data-link="playgame" data-options="{player:'Arnold'}"&gt;Arnold&lt;/div&gt;
  &lt;/div&gt;
  
  // after players are selected, it shows this page:
  &lt;div class="playgame"&gt;
      PLAYING!
  &lt;/div&gt;
  </code></pre>