vue组件初学_弹射小球(实例讲解)
发布时间:2020-12-17 02:48:39 所属栏目:百科 来源:网络整理
导读:1. 定义每个弹射的小球组件( ocicle ) 2. 组件message自定义属性存放小球初始信息(可修改) 3. 思路 3.1 定时器设置小球每一帧移动 3.2 初始方向:isXtrue为true则小球为横坐标正方向; isYtrue为true则小球为纵坐标正方向 3.3 每次移动之前获取小球当前坐标(
1. 定义每个弹射的小球组件( ocicle ) 2. 组件message自定义属性存放小球初始信息(可修改) 3. 思路 3.1 定时器设置小球每一帧移动 3.2 初始方向:isXtrue为true则小球为横坐标正方向; isYtrue为true则小球为纵坐标正方向 3.3 每次移动之前获取小球当前坐标(oleft,otop),当前坐标加上移动距离为下一帧坐标 3.4 边界判断:横轴坐标范围超过最大值则加号变减号 4. vue知识点 4.1 父子组件传递信息使用props 4.2 模板编译之前获取el宽高 4.3 子组件获取el宽高 ( this.$root.elWidth,this.$root.elHeight ) 4.4 模板编译完成后更新子组件信息 5. 代码
Document
<script src="https://unpkg.com/vue"> |