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使用activex控件的代码
Jan 27 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
Javascript writable特性介绍
Feb 27 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
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
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
php实现的验证码文件类实例
2015/06/18 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python动态加载包的方法小结
2016/04/18 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
python实现俄罗斯方块
2018/06/26 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
安全责任书怎么写
2014/07/28 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python