Vue

by mike1981

HTML

<div id="app">
	<movable-component text="Tiger" propleft="100" proptop="100" color="#E08119"></movable-component>
	<movable-component text="Bear" propleft="200" proptop="300" color="brown"></movable-component>
	<movable-component text="Snake" propleft="300" proptop="450" color="SpringGreen"></movable-component>
</div>

CSS

body {
  /*background: #20262E;*/
  padding: 20px;
  font-family: Helvetica;
}

#app {
  /*background: 0;*/
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}
.movable {
	position:absolute;
	border: 3px solid black;
	height: 80px;
	width: 150px;
}
.movable .counter {
	border: 1px solid red;
}

JavaScript

const MyComponent= {
    template:'<div class="movable" v-bind:style="{left: left+\'px\', top: top + \'px\', borderColor: color}">'
			+ '{{text}}<br> <span class="counter">Счетчик: {{counter}} <button v-on:click="counter++">+1</button></span><br>'
			+ '<button v-on:click="move(\'left\', 0)">&lArr;</button>'
			+ '<button v-on:click="move(\'left\', 1)">&rArr;</button>'
			+ '<button v-on:click="move(\'top\',  0)">&uArr;</button>'
			+ '<button v-on:click="move(\'top\',  1)">&dArr;</button>'
			+'</div>',
    props:['text', 'color', 'propleft', 'proptop'],
    data() {
      return {
        counter: 0,
		    left:0,
		    top: 0
      }
    },
	created: function(){
		this.left = this.$props.propleft;
		this.top = this.$props.proptop;
		
	},
	methods: {
		move: function(where, isAdd) {
			let add = isAdd ? 10 : -10;
			this[where] = (+this[where] + add);
			//console.log(this.propleft);
			//console.log(this.left);
			//this.propleft+=10; //ошибка
		}
	}
  };
  
  

  
var app =  new Vue({
    el: "#app",
    components: {'movable-component': MyComponent},
    data() {
      return {
        message: 'From Parent Component!',
		num: 44,
      }
    }
  });