旅智产研六月份分享

主题

前端之路，一起成长（产品、研发同学如何学习前端）

分享内容

1.旅智以及整个集团的前端技术都有哪些？找准方向，就会找到答案
2.产品同学如何更好的掌握体验交互，并呈现在需求文档中？
3.后端同学如何掌握基础的前端技术？促进职业UP？

中心思想

产品、后端、前端在日常工作中都会和前端打交道，那前端到底是什么，都有哪些知识点，怎么能学会前端呢？

个人介绍

经历过PC端转移动端的技术革命浪潮，负责过小程序高并发订单页的开发，见证过从无到有的旅智前端的发展。主导了旅智前端工程化的技术发展，也在不断丰富整个前端多样性的技术创新

封面

签到二维码

前端角色

引言

1. 前端是不是就画画页面
2. 前端变化快,学个Vue3.0 Angular6.0就弯道超车了
3. 前端感觉没啥可学的了,学一门后端语言寻求突破
4. 旅智的前端，乃至集团的前端的技术栈是什么
5. 我该如何突破我前端的天花板

   拓扑图

   

案例

element-ui

<div>
  <el-input placeholder="请输入内容" v-model="input1">
    <template slot="prepend">Http://</template>
  </el-input>
</div>
<div style="margin-top: 15px;">
  <el-input placeholder="请输入内容" v-model="input2">
    <template slot="append">.com</template>
  </el-input>
</div>
<div style="margin-top: 15px;">
  <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
    <el-select v-model="select" slot="prepend" placeholder="请选择">
      <el-option label="餐厅名" value="1"></el-option>
      <el-option label="订单号" value="2"></el-option>
      <el-option label="用户电话" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
</div>
<style>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      select: ''
    }
  }
}
</script>

插槽的概念

Slot 通俗的理解就是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置）
并且可以作为承载分发内容的出口 在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。

RD: 快速上手
PM: 策划稿的案例模板
FE: 性能如何提升

表格规范-设计规范2.0中的一部分

1.24栅格布局的特点
2.我们在1440或者1920的上面，筛选区域是如何布局的呢
3.表格的设计特点

关于栅格

Ant Design 采用 24 栅格体系。以上下布局的结构为例，对内容区域进行 24 栅格的划分设置，如下图所示。我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。

对开发者而言栅格是实现动态布局的手段，而设计师对于栅格的理解源自平面设计中的栅格。在具体落地中视角的不同就容易造成偏差，最终影响还原度，继而增加沟通成本。

Vue&&Angular

1. beforeCreate（Vue实例还没有创建）
2. created（Vue实例创建完，属性方法都已创建;用于api请求,初始化参数）
3. beforeMount（虚拟节点已经合成，等待dom渲染）
4. mounted（api请求,初始化参数,此时情况,所有dom节点都已渲染完毕,能够获取真实的dom节点）
5. beforeUpdate
6. updated （属性发生改变）
7. beforeDestroy

8. destroyed

9. constructor（初始话一些参数）

10. ngOnInit（一些api请求）
11. ngOnChanges(change: SimpleChanges)（输入属性的值发生改变）
12. ngDoCheck（检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应）
13. ngAfterContentInit（ContentChild与ContentChildren初始化之后调用，只调用一次）
14. ngAfterContentChecked
15. ngAfterViewInit（ViewChild与ViewChildren初始化之后调用，只调用一次）
16. ngAfterViewChecked（检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。 在每个变更检测周期中，紧跟在 ngOnChanges() 和 ngOnInit() 后面调用, 有些特殊情况，有的时候我们需要真实的dom节点，可以再ngDoCheck判断）
17. ngOnDestroy（去除订阅，销毁事件）

    当 Angular 实例化组件类并渲染组件视图及其子视图时，组件实例的生命周期就开始了。生命周期一直伴随着变更检测，Angular 会检查数据绑定属性何时发生变化，并按需更新视图和组件实例

点评二维码