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

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

1. 定义每个弹射的小球组件( ocicle )

2. 组件message自定义属性存放小球初始信息(可修改)

{

　　　top: "0px", //小球距离上方坐标

　　　left: "0px", //小球距离左边坐标

　　　speedX: 12, //小球每次水平移动距离

　　　speedY: 6 //小球每次垂直移动距离

}

3. 思路

3.1 定时器设置小球每一帧移动

3.2 初始方向：isXtrue为true则小球为横坐标正方向；

isYtrue为true则小球为纵坐标正方向

3.3 每次移动之前获取小球当前坐标(oleft,otop)，当前坐标加上移动距离为下一帧坐标

3.4 边界判断：横轴坐标范围超过最大值则加号变减号

4. vue知识点

4.1 父子组件传递信息使用props

4.2 模板编译之前获取el宽高

beforeMount: function (){

this.elWidth=this.$el.clientWidth;

this.elHeight=this.$el.clientHeight;

}

4.3 子组件获取el宽高 ( this.$root.elWidth,this.$root.elHeight )

4.4 模板编译完成后更新子组件信息

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();

}

5. 代码

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。