vue-弹幕

失业当中，在寻找一份前端工作~坐标：广州/深圳

用vue刷freecodecamp项目。

第一篇：弹幕！预览地址

欢迎私聊与评论！

我的思路

静态(弹幕)

数据处理

当文字从输入到被Enter后或Send后，发生了什么事呢？

1. 在enter or send前，需要获取input里的文字，利用v-model命令实现双向绑定到指定对象，等于把输入给缓存起来了。保证被enter or send时是热乎乎的,最新鲜的。
2. 当你enter or send时，缓存数据被拿出，被安排去凸造型。
3. 负责造型的看到有新的服务对象，立刻按照既定流程操作。
   • 既定流程：拿到文字数据，当然要给它打扮打扮，给它一个计算出来的随机top（高度） ，文字高度和随机top被打包成一个对象，存进数据库里。
4. 负责渲染的老大爷尽忠职守，一直盯着数据库，当库了来了新人，立刻渲染。

实现

//存储的数据
    data{
      msg:null， //缓存
      ku: [ ] //存取数据
}
//先来个双向绑定


//处理数据,打扮后打包
    setdata() {
      if(this.msg) {
      let num = Math.random()*300;
      let top = Math.floor(num);
      let obj = {msg:this.msg,top:top}
      this.ku.push(obj);
      this.msg = " ";
      }
    }
//渲染大爷

  {{el.msg}}

//对应的css

   .fly {
    position: absolute;
    transform: translateX(xxvw);
    animation: go xxs ease-in infinite;

   }
   @keyframes go {
    from {
      transform: translateX(xxvw);
    }
    to {
      transform:  translateX(xxxvw);
    }
   }

END