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. 代码
<!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>
6. 链接地址( https://github.com/hsiangleev/vue-moveBall )
vue组件初学--弹射小球的更多相关文章
- vue.js加入购物车小球动画
生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画 动画的内容分别是外层和内层,外层控制动画小 ...
- vue组件
分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件 具备一下的几个要求 ...
- vue组件的配置属性
vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...
- vue组件，撸第一个
实现此例您可以学到: vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一.搭建vue开发环境 更换镜像到cnpmnpm ins ...
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- vue组件大集合 component
vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- 关于vue组件的一个小结
用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...
随机推荐
- TCP协议三次握手与四次挥手通俗解析
TCP/IP协议三次握手与四次握手流程解析 一.TCP报文格式 TCP/IP协议的详细信息参看<TCP/IP协议详解>三卷本.下面是TCP报文格式图: 图1 TCP报文格式 上图中有几个字 ...
- Mysql数据库索引
今天,我们来讲讲Mysql数据库的索引的一些东西,想必大家都知道索引能干吗?必然是查找数据表的时候,查找的速度快啊,尤其是那些几百万行的数据库,不建立索引,你是想考验用户的耐心吗?Mysql有多种存储 ...
- Android Studio发布项目到jcenter,一行代码引入Module
前面我们使用自己封装的okhttp项目时候,只需要app/build.gradle文件中加一行代码就能使用项目. compile 'com.ansen.http:okhttpencapsulation ...
- OpenID Connect：OAuth 2.0协议之上的简单身份层
OpenID Connect是什么?OpenID Connect(目前版本是1.0)是OAuth 2.0协议(可参考本人此篇:OAuth 2.0 / RCF6749 协议解读)之上的简单身份层,用 A ...
- 0908期 HTML 样式表属性
1.背景与前景 /*背景色,样式表优先级高*/ background-image:url(路径); /*设置背景图片(默认)*/ background-attachment:fixed; ...
- SUSE Linux Enterprise 11 离线安装 DLIB python机器学习模块
python机器学习模块安装 环境:SUSE Linux Enterprise 11 sp4 离线安装 说明:在安装dlib时依赖的基础 环境较多,先升级gcc,以适应c++ 11的使用:需要用到c ...
- ASP.NET 控制器
1.继承Controller public class TestController : Controller2.编写控制器方法 // URL : test/Edit/1 [ ...
- [转载]Web前端和后端之区分，以及面临的挑战【转】
原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...
- Spring mybatis源码篇章-NodeHandler实现类具体解析保存Dynamic sql节点信息
前言:通过阅读源码对实现机制进行了解有利于陶冶情操,承接前文Spring mybatis源码篇章-XMLLanguageDriver解析sql包装为SqlSource SqlNode接口类 publi ...
- # 团队作业8——第二次项目冲刺（Beta阶段）--5.27 seventh day
团队作业8--第二次项目冲刺(Beta阶段)--5.27 seventh day Day six: 会议照片 项目进展 Beta冲刺的最后一天,以下是今天具体任务安排: 队员 昨天已完成的任务 今日计 ...