vue组件初学_弹射小球(实例讲解)

2024-09-28 04:50:04

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组件初学_弹射小球(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

vue组件初学_弹射小球(实例讲解)

1. 定义每个弹射的小球组件( ocicle ) 2. 组件message自定义属性存放小球初始信息(可修改) { top: "0px", //小球距离上方坐标 left: "0px", //小球距离左边坐标 speedX: 12, //小球每次水平移动距离 speedY: 6 //小球每次垂直移动距离 } 3. 思路 3.1 定时器设置小球每一帧移动 3.2 初始方向:isXtrue为true则小球为横坐标正方向: isYtrue为true则小球为纵坐标正方向 3
vue项目中使用ueditor的实例讲解

以vue-cli生成的项目为例 1.static文件夹下先放入ueditor文件 2.index.html添加如下代码 <script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="
Vue组件生命周期三个阶段全面总结讲解

目录组件生命周期创建阶段 beforeCreate阶段 created阶段 beforeMount阶段 mounted阶段运行阶段 beforeUpdate阶段 updated阶段销毁阶段 beforeDestroy阶段 destroyed阶段总结组件生命周期生命周期(Life Cycle)是指一个组件从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段. 生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行. 创建阶段 before
vue 实现 tomato timer(蕃茄钟)实例讲解

近期在学习[时间管理]方面的课程,其中有一期讲了蕃茄工作法,发现是个好多东西.蕃茄工作法核心思想就是:工作25分钟,休息5分钟.如果您好了解更多可以自行度娘. 在加上本人是一个程序猿,就想用程序的方式来表达对此工作法的敬意.因此就产生了用vue实现一个tomato timer的想法. 一.vue如何实现他的 1. 依赖的包 "devDependencies": { "babel-plugin-lodash": "^3.2.11", "b
js学习总结_选项卡封装(实例讲解)

这个插件对应的html的结构如下 <div class='box' id='tabFir'> <ul id='tabOptions'> <li class='select'>页卡一</li> <li>页卡二</li> <li>页卡三</li> </ul> <div class='select'> <div>1</div> <div>2</div&
java排序算法之_选择排序(实例讲解)

选择排序是一种非常简单的排序算法,从字面意思我们就可以知道,选择就是从未排序好的序列中选择出最小(最大)的元素,然后与第 i 趟排序的第 i-1(数组中下标从 0 开始) 个位置的元素进行交换,第 i 个元素之前的序列就是已经排序好的序列.整个排序过程只需要遍历 n-1 趟便可排好,最后一个元素自动为最大(最小)值. 举个小例子: arr[] = {3,1,2,6,5,4} 第 1 趟排序: index = 0, min = 1, 交换后 --> 1,3,2,6,5,4 第 2 趟排序: in
vue进行post和get请求实例讲解

目录一.基本使用方法 1.get请求 2.Post请求使用axios: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 一.基本使用方法 1.get请求 // Make a request for a user with a given ID axios.get('/user?ID=12345') .then(function (response) { console.
Vue组件中prop属性使用说明实例代码详解

Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名: Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h
vue中进行微博分享的实例讲解

1.首先要在页面写出点击可进行微博分享的入口,样式因自己项目而定: <li class="bottomIcon_5 shareSina"><a href="javascript:;" rel="external nofollow" target="_blank"></a><div class="shareTxt">微博</div></li&g
浅谈vue 组件中的setInterval方法和window的不同

vue组件中,this指向实例,[实例中重写了setInterval等一整套方法].所以,千万不能和 window 下挂载的方法混用具体不同在于,window.setInterval执行完比后返回一个id,而vue实例中返回[定时器对象],当然该对象中包含一个_id的私有属性因为 clearInterval 方法参数是id,所以最佳实践是统一使用 window 的方法,不要使用 vue组件的方法 vue中的定时器方法,要使用箭头函数,不要出现 const that = this 的写法 //

vue组件初学_弹射小球(实例讲解)

相关推荐

随机推荐