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 Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 Javascript
原生js实现随机点名
Jul 05 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 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的库,结果发现很多东西
2006/12/31 PHP
使用apache模块rewrite_module (转)
2007/02/14 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
PHP获取文件行数的方法
2015/06/10 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
json 定义
2008/06/10 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
JavaScript实现区块链
2018/03/14 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
javascript代码实现简易计算器
2021/01/25 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
MYSQL支持事务吗
2013/08/09 面试题
学校办公室主任职责
2013/12/27 职场文书
地方白酒代理协议书
2014/10/25 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
调解协议书范本
2016/03/21 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python