vue组件初学--弹射小球

最新推荐文章于 2024-06-14 11:02:57 发布
最新推荐文章于 2024-06-14 11:02:57 发布
阅读量258 收藏
点赞数

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 >
        <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>

6. 链接地址 ( http://hsianglee.top/vue/moveBall.html )

huohuotu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 翻页组件vue-flip-page效果
10-15
npm install vue-flip-page ``` 安装完成后，在需要使用该组件的页面中导入并注册： ```javascript import turn from 'vue-flip-page'; components: { turn } ``` 请注意，一个页面只能引入一次Vue Flip Page组件。...
vue 画布 vue-fabric-drawing
02-20
Vue-fabric-drawingboard-master 是该组件的源代码仓库，包含了实现这一功能的所有必要文件。通过这个压缩包，我们可以深入了解组件的结构和工作原理。 1. **Vue 组件化思想**：Vue.js 的核心特性是组件化，Vue ...
vue.js获取屏幕高度clientHeight设置充满屏幕引导页
热门推荐
jerrica的博客
06-12 5万+
实现效果：方法：html:JS：&lt;script&gt; export default { data(){ return { clientHeight:'', } }, mounted(){ // 获取浏览器可视区域高度 this.clientHeight = `${document.documen...
Vue如何实时获取屏幕的宽度高度
weixin_54111648的博客
02-10 7885
export default { name: 'page-index', data(){ return{ windowWidth: document.documentElement.clientWidth, //实时屏幕宽度 windowHeight: document.documentElement.clientHeight, //实时屏幕高度 } }, methods: { .
Vue与Konva.js结合实现空间结构管理与标注图片数据多边形区域功能
最新发布
m0_54340021的博客
06-14 1556
本文介绍了一个基于Vue.js和Konva.js实现的空间结构管理与多边形区域标注功能。该系统允许用户在图片上进行精确的多边形区域绘制，并提供空间结构的数字化管理功能。通过初始化Konva舞台、加载底图、渲染多边形区域、选择工具绘制以及完成绘制等步骤，用户可以轻松地进行空间标注和管理。系统还支持双击编辑区域信息、提供绘制操作指引，并展示了完整的数据结构。这一工具不仅提高了空间数据标注的效率，还增强了数据的可管理和可编辑性，为数字化转型中的相关领域提供了有力的技术支持。
vue中watch监听页面窗口高度
qdhwh的博客
04-11 2837
1.首先需要在data里面定义页面的高度 data (){ return { fullHeight: document.documentElement.clientHeight } } 2.把window.onresize事件挂在到mounted mounted() { const that = this window.onresize = () => { return (() => { window.fullHeight = document.documentElement.clientHei
clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
qq_36934775的博客
01-28 104
clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度，其中： clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素 (clientHeight=height+padding) offsetHeight：包括padding、border、...
vue脚手架,vue3 组件 vue-property-decorator 组件
09-11
`vue-property-decorator`是一个库，它是Vue.js和TypeScript的结合，提供了装饰器来帮助我们在TypeScript中更好地声明和管理组件的属性。它使得我们可以利用TypeScript的强类型系统，提高代码的可维护性和可读性。...
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
vue学习04——小球移动
m0_73890688的博客
09-24 318
5.小球移动代码块，采用节点移动跟随对样式进行修改，x_speed为移动速度。用if来控制小球，使其不会跑出框外，用random随机数更改颜色。鼠标悬停在上面时触发 box:hover。// 时间循环方法 1秒=1000毫秒。// 时间循环方法 1秒=1000毫秒。// 根据id获取元素，拿到处理对象。// 根据id获取元素，拿到处理对象。// 拿到要处理的对象。// 获取对象的宽高。// 获取对象的宽高。// 对样式进行修改。// 获取对象的宽高。
vue-moveball:vue2 拖拽小球组件
05-19
vue-move-ball A Vue.js project vue2 可拖拽小球组件 停止拖拽10s后自动移动到最近的边沿半隐藏 Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build
[封装组件]分别使用react、vue、原生JS完成自动移动的小球
接着奏乐接着舞的博客
02-13 1246
本篇文章的主要目的是，通过手写一个自动移动的小球，然后以组件的形式，抽离出去实现随机生成一群小球，然后分别使用react 、 vue 、 原生JS去实现，体会组件封装的设计模式及好处。
Threejs建造属于自己的坐标系让小球沿着任意轨迹线移动
weixin_51236754的博客
04-28 1433
建造属于自己的坐标系，让小球沿着任意轨迹线移动
Threejs,小球沿随机线的轨迹运动
映月潜的博客
12-02 5869
最近想做一个粒子沿轨迹线运动的东东，不过还是先实现了一个小目标，有空在添加粒子的部分。 功能：主要的功能如下，就是一个小球沿着一个随意生成的线运动。 原理：原理也不复杂，两个点之间的向量差就是小球应该运动的方向。直接加上小球当前的位置就是小球要到达的目标位置。 主要代码：默认为threeJS标准场景，参考：（留个坑，假装有连接） 先随机生成几个点存下来，我想让点都在坐标轴正方向的象限内，就取了随...
canvas小球绕斜椭圆轨迹运动
苦作舟的空城机
11-06 2708
在MDN web docs中有过关于使用canvas来绘制太阳系动画的例子，此种方法需要使用translate来不断改变画布原点。 MDN示例参考：太阳系运动示例 现在需要在canvas画布上绘制一个小球绕椭圆转动的动画效果 首先可以使用js 构造函数模式定义一个小球对象 function ball(x, y, obj) { this.x = x; this.y = y; this.angle = 0; this.draw = function() { var self = this; ct
前端虚拟列表【虚拟卷帘】的实现
weixin_33971977的博客
03-19 1341
书接上文，在之前的 聊聊前端开发中的长列表 中，笔者对「可视区域渲染」的列表进行了介绍，并写了一个简化的例子来展现如何实现。这种列表一般叫做 Virtual List，在本文中会使用「虚拟列表」来指代。在本文中，笔者会把上篇文章中的简化例子一步步强化成一个相对通用、性能优异的虚拟列表组件，旨在讲清楚虚拟列表的实现思路。阅读本文不需要阅读上一篇文章，但代码是使用 Vue.js 来实现的，所以你需要有...
vue nextTick源码解析
weixin_43294560的博客
12-10 1193
<template> <div>{{ name }}</div> </template> <script> export default { data() { return { name: "" } }, mounted() { console.log(this.$el.clientHeight) // 0 this.name = "jeff" console.log(this.$
Vue2.0 实战 之 上拉加载下拉刷新
weixin_33694620的博客
05-22 879
目前有很多方式可以实现上拉刷新下拉加载的功能 基于vue2.0并参考网上的一些实例完善了一个vue的组件来实现上拉刷新，下拉下载的功能。 下拉刷新 下拉加载更多 暂无数据 以下为代码 scroll.vue文件 template部分 script部...
vue组件v-model
09-13
Vue组件的v-model是用于双向绑定数据的指令，它可以方便地将组件的数据与父组件的数据进行双向绑定。在使用v-model指令时，Vue会自动将一个value属性用作prop传递给组件，并将一个input事件用作event监听组件的值的变化。 默认情况下，v-model会将组件的数据传递给父组件的value属性，并监听input事件来更新组件的数据。这种情况适用于大多数输入类型，如文本框、下拉框等。 然而，有时候我们希望自定义组件的v-model使用不同的prop和event，以满足特定的需求。在这种情况下，可以使用Vue的model选项来定制prop和event。 通过model选项，我们可以将组件的数据传递给自定义的prop，并监听自定义的event来更新组件的数据。这样，我们就可以根据实际情况来灵活地使用v-model，并避免与其他输入类型产生冲突。 总结来说，v-model是Vue组件中用于双向绑定数据的指令，它根据默认规则将组件的数据传递给父组件的value属性，并监听input事件来更新组件的数据。如果需要定制prop和event，可以使用model选项来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值