当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue组件初学_弹射小球(实例讲解)

vue组件初学_弹射小球(实例讲解)

2017年12月12日  | 移动技术网IT编程  | 我要评论

极乐谷二内,林海血缘,蟒蛇生吞小孩 解剖后惊呆全场人

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组件初学_弹射小球(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网