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 >
        <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. 链接地址 ( http://hsianglee.top/vue/moveBall.html )

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值