naive17/index.html

## index.html
<style id="jsbin-css">
.player {
  background-color : red;
  width : 32px;
  height : 32px;
  position : absolute;
  transition : all .8s linear;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

<body>
  <div id="app" v-on:keyup.up="move('up')"  v-on:keyup.down="move('down')">
    <p>{{keydown}}</p>
    <p>{{direction}}</p>
    <div class="player" v-bind:style="{ top : computedy , left : computedx }"></div>
  </div>
<script id="jsbin-javascript">
var app = new Vue({
  el :"#app",
  data : {
    x : 0,
    y : 0,
    moving :false,
    keydown : false,
    direction : "up"
  },
  computed : {
    computedx : function(){
      return this.x * 32;
    },
    computedy : function(){
      return this.y * 32;
    }
  },
  created: function () {
    window.addEventListener('keydown',this.setkeydown);
    window.addEventListener('keyup',this.setkeyup);
  },
  methods : {
    setkeydown : function(event){
      switch(event.keyCode){
        case 38: // UP
            this.direction = "up";
        break;
        case 39: // RIGHT
            this.direction = "right";
        break;
        case 40: // DOWN
            this.direction = "down";
        break;
        case 37: // LEFT
            this.direction = "left";
        break;
      }

      this.keydown = true;
    },
    setkeyup : function(event){
      this.keydown = false;
    }
  }
})
</script>


<script id="jsbin-source-css" type="text/css">.player {
  background-color : red;
  width : 32px;
  height : 32px;
  position : absolute;
  transition : all .8s linear;
}

</script>

<script id="jsbin-source-javascript" type="text/javascript">var app = new Vue({
  el :"#app",
  data : {
    x : 0,
    y : 0,
    moving :false,
    keydown : false,
    direction : "up"
  },
  computed : {
    computedx : function(){
      return this.x * 32;
    },
    computedy : function(){
      return this.y * 32;
    }
  },
  created: function () {
    window.addEventListener('keydown',this.setkeydown);
    window.addEventListener('keyup',this.setkeyup);
  },
  methods : {
    setkeydown : function(event){
      switch(event.keyCode){
        case 38: // UP
            this.direction = "up";
        break;
        case 39: // RIGHT
            this.direction = "right";
        break;
        case 40: // DOWN
            this.direction = "down";
        break;
        case 37: // LEFT
            this.direction = "left";
        break;
      }

      this.keydown = true;
    },
    setkeyup : function(event){
      this.keydown = false;
    }
  }
})</script></body>

## jsbin.mabijemuti.css
.player {
  background-color : red;
  width : 32px;
  height : 32px;
  position : absolute;
  transition : all .8s linear;
}

## jsbin.mabijemuti.js
var app = new Vue({
  el :"#app",
  data : {
    x : 0,
    y : 0,
    moving :false,
    keydown : false,
    direction : "up"
  },
  computed : {
    computedx : function(){
      return this.x * 32;
    },
    computedy : function(){
      return this.y * 32;
    }
  },
  created: function () {
    window.addEventListener('keydown',this.setkeydown);
    window.addEventListener('keyup',this.setkeyup);
  },
  methods : {
    setkeydown : function(event){
      switch(event.keyCode){
        case 38: // UP
            this.direction = "up";
        break;
        case 39: // RIGHT
            this.direction = "right";
        break;
        case 40: // DOWN
            this.direction = "down";
        break;
        case 37: // LEFT
            this.direction = "left";
        break;
      }

      this.keydown = true;
    },
    setkeyup : function(event){
      this.keydown = false;
    }
  }
})
	<style id="jsbin-css">
	.player {
	background-color : red;
	width : 32px;
	height : 32px;
	position : absolute;
	transition : all .8s linear;
	}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

	<body>
	<div id="app" v-on:keyup.up="move('up')" v-on:keyup.down="move('down')">
	<p>{{keydown}}</p>
	<p>{{direction}}</p>
	<div class="player" v-bind:style="{ top : computedy , left : computedx }"></div>
	</div>
	<script id="jsbin-javascript">
	var app = new Vue({
	el :"#app",
	data : {
	x : 0,
	y : 0,
	moving :false,
	keydown : false,
	direction : "up"
	},
	computed : {
	computedx : function(){
	return this.x * 32;
	},
	computedy : function(){
	return this.y * 32;
	}
	},
	created: function () {
	window.addEventListener('keydown',this.setkeydown);
	window.addEventListener('keyup',this.setkeyup);
	},
	methods : {
	setkeydown : function(event){
	switch(event.keyCode){
	case 38: // UP
	this.direction = "up";
	break;
	case 39: // RIGHT
	this.direction = "right";
	break;
	case 40: // DOWN
	this.direction = "down";
	break;
	case 37: // LEFT
	this.direction = "left";
	break;
	}

	this.keydown = true;
	},
	setkeyup : function(event){
	this.keydown = false;
	}
	}
	})
	</script>


	<script id="jsbin-source-css" type="text/css">.player {
	background-color : red;
	width : 32px;
	height : 32px;
	position : absolute;
	transition : all .8s linear;
	}

	</script>

	<script id="jsbin-source-javascript" type="text/javascript">var app = new Vue({
	el :"#app",
	data : {
	x : 0,
	y : 0,
	moving :false,
	keydown : false,
	direction : "up"
	},
	computed : {
	computedx : function(){
	return this.x * 32;
	},
	computedy : function(){
	return this.y * 32;
	}
	},
	created: function () {
	window.addEventListener('keydown',this.setkeydown);
	window.addEventListener('keyup',this.setkeyup);
	},
	methods : {
	setkeydown : function(event){
	switch(event.keyCode){
	case 38: // UP
	this.direction = "up";
	break;
	case 39: // RIGHT
	this.direction = "right";
	break;
	case 40: // DOWN
	this.direction = "down";
	break;
	case 37: // LEFT
	this.direction = "left";
	break;
	}

	this.keydown = true;
	},
	setkeyup : function(event){
	this.keydown = false;
	}
	}
	})</script></body>