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的语法在代码的可读性以及后期的维 ...
随机推荐
- poj2901 Hotel
Hotel Time Limit: 10000MS Memory Limit: 65536K Total Submissions: 859 Accepted: 280 Description ...
- GridView用法详解
前台页面: Default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&qu ...
- c++ new 的相关
首先是一个链接 这里 说的很详细了 http://www.cnblogs.com/alephsoul-alephsoul/archive/2012/10/17/2728019.html 关于c++ ...
- mysql的索引问题分析
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; color: #454545 } span. ...
- MySql数据库导入导出
1.导出整个数据库 mysqldump -u 用户名 -p 数据库名 > 存放位置 比如: mysqldump -u root -p project > c:/a. ...
- 栈的实现Java
package practice; import java.util.Iterator; //栈 public class MyStack<T> implements Iterable&l ...
- Redis集群的相关概念
1.1 redis-cluster架构图 架构细节: (1)所有的redis节点彼此互联(PING-PONG机制),内部使用二进制协议优化传输速度和带宽. (2)节点的fail是通过集群中超过半数的节 ...
- STM32—无需中断来实现使用DMA接收串口数据
本节目标: 通过DMA,无需中断,接收不定时长的串口数据 描述:当在串口多数据传输下,CPU会产生多次中断来接收串口数据,这样会大大地降低CPU效率,同时又需要CPU去做其它更重要的事情,我们应该如何 ...
- 【Java IO流】对象的序列化和反序列化
对象的序列化和反序列化 1)对象序列化,就是将Object对象转换成byte序列,反之叫对象的反序列化. 2)序列化流(ObjectOutputStream),是字节的过滤流—— writeObjec ...
- 【Java并发编程】之六：Runnable和Thread实现多线程的区别（含代码）
转载请注明出处:http://blog.csdn.net/ns_code/article/details/17161237 Java中实现多线程有两种方法:继承Thread类.实现Runnable接口 ...