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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
使用vue-resource进行数据交互的实例
Sep 02 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 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
YII路径的用法总结
2014/07/09 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
JS实现self的resend
2010/07/22 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
js实现抽奖效果
2017/03/27 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
利用Python爬虫给孩子起个好名字
2017/02/14 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
华为慧通面试题
2012/09/11 面试题
商场中秋节广播稿
2014/01/17 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
学校校庆演讲稿
2014/05/22 职场文书
技术股份合作协议书
2014/10/05 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers