首页 / VUE / vue组件初学_弹射小球(实例讲解)
vue组件初学_弹射小球(实例讲解)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue组件初学_弹射小球(实例讲解)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3784字，纯文字阅读大概需要6分钟。
内容图文
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. 代码
<!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.com/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%",
top: "0px",
left: "0px"
},
//横坐标方向的速度
speedX: 0,
//纵坐标方向的速度
speedY: 0,
//isX为真，则在横坐标方向为正
isX: true,
//isY为真，则在纵坐标方向为正
isY: true,
//小球当前坐标
oleft: 0,
otop: 0
}
},
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();
},
methods: {
move: function (){
var self=this;
setInterval(function (){
//更新小球坐标
self.oleft=parseInt(self.addStyle.left);
self.otop=parseInt(self.addStyle.top);
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.top=this.otop+this.speedY+"px";
//高度超过最大边界
if(this.otop>this.$root.elHeight-5){
this.addStyle.top=this.otop-this.speedY+"px";
this.isY=false;
}
}else{
this.addStyle.top=this.otop-this.speedY+"px";
//高度超过最小边界
if(this.otop<5){
this.addStyle.top=this.otop+this.speedY+"px";
this.isY=true;
}
}
}
}
}
var vm=new Vue({
el: "#app",
data: {
//获取el节点宽高
elWidth: 0,
elHeight: 0,
//设置小球初始信息
message1: {
top: "0px",
left: "600px",
speedX: 12,
speedY: 6
},
message2: {
top: "0px",
left: "300px",
speedX: 8,
speedY: 6
},
message3: {
top: "300px",
left: "0px",
speedX: 13,
speedY: 5
}
},
//更新el节点宽高
beforeMount: function (){
this.elWidth=this.$el.clientWidth;
this.elHeight=this.$el.clientHeight;
},
components: {
"ocicle": tem
}
})
</script>
</body>
</html>
以上这篇vue组件初学_弹射小球(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的vue组件初学_弹射小球(实例讲解)全部内容，希望文章能够帮你解决vue组件初学_弹射小球(实例讲解)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。