vue组件初学_弹射小球(实例讲解)
网络编程 2021-07-04 17:32www.168986.cn编程入门
狼蚁网站SEO优化长沙网络推广就为大家带来一篇vue组件初学_弹射小球(实例讲解)。长沙网络推广觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随长沙网络推广过来看看吧
1. 定义每个弹射的小球组件( ocicle )
2. 组件message自定义属性存放小球初始信息(可修改)
{ : "0px", //小球距离上方坐标 left: "0px", //小球距离左边坐标 speedX: 12, //小球每次水平移动距离 speedY: 6 //小球每次垂直移动距离 }
3. 思路
3.1 定时器设置小球每一帧移动
3.2 初始方向:isXtrue为true则小球为横坐标正方向;
isYtrue为true则小球为纵坐标正方向
3.3 每次移动之前获取小球当前坐标(oleft,o),当前坐标加上移动距离为下一帧坐标
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.=this.message.; this.addStyle.left=this.message.left; this.speedX=this.message.speedX; this.speedY=this.message.speedY; //小球初始坐标 this.oleft=parseInt(this.addStyle.left); this.o=parseInt(this.addStyle.); this.move(); }
5. 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html, body{ padding: 0; margin: 0; width: 100%; height: 100%; } #app{ width: 800px; height: 500px; margin: 50px auto; outline: 1px solid #f69; position: relative; } </style> </head> <body> <div id="app"> <ocicle :message="message1"></ocicle> <ocicle :message="message2"></ocicle> <ocicle :message="message3"></ocicle> </div> <script src="https://unpkg./vue"></script> <script> var tem={ props: ["message"], template: '<div class="article" :style="addStyle"></div>', data: function (){ return { //初始化小球样式 addStyle: { width: "10px", height: "10px", backgroundColor: "#000", position: "absolute", marginTop: "-5px", marginLeft: "-5px", borderRadius: "50%", : "0px", left: "0px" }, //横坐标方向的速度 speedX: 0, //纵坐标方向的速度 speedY: 0, //isX为真,则在横坐标方向为正 isX: true, //isY为真,则在纵坐标方向为正 isY: true, //小球当前坐标 oleft: 0, o: 0 } }, mounted: function (){ //根据父组件信息更新小球数据 this.addStyle.=this.message.; this.addStyle.left=this.message.left; this.speedX=this.message.speedX; this.speedY=this.message.speedY; //小球初始坐标 this.oleft=parseInt(this.addStyle.left); this.o=parseInt(this.addStyle.); this.move(); }, methods: { move: function (){ var self=this; setInterval(function (){ //更新小球坐标 self.oleft=parseInt(self.addStyle.left); self.o=parseInt(self.addStyle.); self.isXtrue(); self.isYtrue(); }, 20); }, //判断横坐标 isXtrue: function (){ //true 横坐标正方向 //false 横坐标负方向 if(this.isX){ this.addStyle.left=this.oleft+this.speedX+"px"; //宽度超过最大边界 if(this.oleft>this.$root.elWidth-5){ this.addStyle.left=this.oleft-this.speedX+"px"; this.isX=false; } }else{ this.addStyle.left=this.oleft-this.speedX+"px"; //宽度超过最小边界 if(this.oleft<5){ this.addStyle.left=this.oleft+this.speedX+"px"; this.isX=true; } } }, // 判断纵坐标 isYtrue: function (){ //true 纵坐标正方向 //false 纵坐标负方向 if(this.isY){ this.addStyle.=this.o+this.speedY+"px"; //高度超过最大边界 if(this.o>this.$root.elHeight-5){ this.addStyle.=this.o-this.speedY+"px"; this.isY=false; } }else{ this.addStyle.=this.o-this.speedY+"px"; //高度超过最小边界 if(this.o<5){ this.addStyle.=this.o+this.speedY+"px"; this.isY=true; } } } } } var vm=new Vue({ el: "#app", data: { //获取el节点宽高 elWidth: 0, elHeight: 0, //设置小球初始信息 message1: { : "0px", left: "600px", speedX: 12, speedY: 6 }, message2: { : "0px", left: "300px", speedX: 8, speedY: 6 }, message3: { : "300px", left: "0px", speedX: 13, speedY: 5 } }, //更新el节点宽高 beforeMount: function (){ this.elWidth=this.$el.clientWidth; this.elHeight=this.$el.clientHeight; }, ponents: { "ocicle": tem } }) </script> </body> </html>
以上这篇vue组件初学_弹射小球(实例讲解)就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程