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 相关文章推荐
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 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+mysql事务rollback&amp;commit示例
2010/02/08 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
php微信公众平台开发类实例
2015/04/01 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
Python 元类使用说明
2009/12/18 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
python 字典中取值的两种方法小结
2018/08/02 Python
机器学习实战之knn算法pandas
2019/06/22 Python
Python占用的内存优化教程
2019/07/28 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
Python3常见函数range()用法详解
2019/12/30 Python
关于Python解包知识点总结
2020/05/05 Python
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
2014年乡镇个人工作总结
2014/12/03 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python