vue组件初学_弹射小球(实例讲解)

{
 　　　top: "0px",    //小球距离上方坐标
　　　left: "0px",    //小球距离左边坐标
　　　speedX: 12,   //小球每次水平移动距离
　　　speedY: 6     //小球每次垂直移动距离
}  

beforeMount: function (){
  this.elWidth=this.$el.clientWidth;
  this.elHeight=this.$el.clientHeight;
}

mounted: function (){
  //根据父组件信息更新小球数据
  this.addStyle.top=this.message.top;
  this.addStyle.left=this.message.left;
  this.speedX=this.message.speedX;
  this.speedY=this.message.speedY;
  //小球初始坐标
  this.oleft=parseInt(this.addStyle.left);
  this.otop=parseInt(this.addStyle.top);
  this.move();
}