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


Posted in Javascript onSeptember 06, 2017

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

Javascript 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
分析JS中this引发的bug
Dec 12 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
JavaScript实现雪花飘落效果
Dec 27 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 #Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 #Javascript
浅谈angular4生命周期钩子
Sep 05 #Javascript
webpack踩坑之路图片的路径与打包
Sep 05 #Javascript
js实现鼠标跟随运动效果
Aug 02 #Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 #Javascript
javascript观察者模式实现自动刷新效果
Sep 05 #Javascript
You might like
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
javascript常用的设计模式
2017/02/09 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
python网页请求urllib2模块简单封装代码
2014/02/07 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Python中无限循环需要什么条件
2020/05/27 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
公司成立感言
2014/01/11 职场文书
学生评语大全
2014/04/18 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
驾驶员安全责任书
2014/07/22 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers