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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
Js组件的一些写法
Sep 10 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
JS重载实现方法分析
Dec 16 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
JavaScript快速调试的两个技巧
Nov 04 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.ini中文版(1)
2006/10/09 PHP
php实现可逆加密的方法
2015/08/11 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python 数据结构之队列的实现
2017/01/22 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
介绍一下Linux中的链接
2016/05/28 面试题
会计专业的自荐信
2013/12/12 职场文书
药店主任岗位责任制
2014/02/10 职场文书
电工工作职责范本
2014/02/22 职场文书
读群众路线心得体会
2014/03/07 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
田径运动会广播稿
2015/08/19 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android