妙味“移动端开发+Vue技术专题分享”课件下载

4月23日,我们举办了一场《移动端开发 + vue.js技术分享》的公开课活动,吸引了不少朋友前来报名参加。

为了照顾到基础不同的朋友,这次技术分享活动我们安排了两场,分为上午和下午两个时段,上午偏向更基础一些的前端小白,下午是给有一定经验的前端开发者做分享。

上午的分享内容是 “移动端开发技巧”,内容包括:

“移动端适配方案、viewprot、像素比计算、移动端开发各类单位的优劣特点、移动端默认样式处理……”

讲师接合实体课程大纲的内容,运用一些通俗易懂的讲解描述和代码演示,来告诉初学者,移动端开发都会涉及哪些问题、关键点是什么、相关技巧和范围都囊括了哪些,最后还为大家留下了一个真实的移动端练习案例:“闲鱼首页.psd”,为那些肯真正动手的朋友提供了一个真实的练习方案。我们的考虑是:既然都来现场听知识分享了,不留练习又该如何验证自己是否听懂学会呢?因此才留下了作业、并提供了解答问题的方式。这和我们真实的实体授课是完全一致的。

下午偏向的是有一定基础的前端开发人员,分享的内容是时下炙手可热的 Vue.js,内容包括:

“Vue 特点、Vue 实例生命周期、v-for指令中key值的作用、单向数据流、组件间的通信、slot分发内容、实现子组件双向数据绑定、异步组件……”

这些内容都是目前大家所关心的内容(也是许多公司的实际要求),若是自己去研究可能遭遇各种困难,而来到现场,听妙味讲师给大家梳理知识和分析关键要点,使大家在认识上和观念上都有一个较为系统的概念,帮助大家了解这些新技术的实现原理和过程,最终让大家建立清晰的学习路线和思路。

接下来,我们来看看活动当天,讲师为大家讲解的具体内容有哪些:

上午 · 移动端分享

PC端与移动端开发区别及注意事项

  • PC下,html在默认情况下以可视区域宽度为基准。
  • 移动设备没有适配时,html的宽度为980。

IOS10 中 viewprot 的问题

  • user-scalable、maximum-scale在IOS10下的问题(允许页面放大操作)。

如何真实的实现:1像素还原

  • 获取像素比:window.devicePixelRatio。
  • 计算缩放比:1 / window.devicePixelRatio。

各单位在移动端开发中的优劣及特点

  • px:绝对单位,固定值。
  • %:相对单位,在宽度计算上还是不错的,但是高度不固定时无法计算。
  • em:相对单位,根据自身或者父级字体大小进行计算。依赖关系复杂,需多次计算。
  • rem:相对单位,只受html的字体大小的影响,依赖关系简单。

基于 rem 的适配方案

  • 通过 window.document.documentElement.clientWidth 配合 rem 设置,以达到 rem 等比调整。
  • rem 调整:window.document.documentElement.clientWidth / 10。
  • 目标(测量)元素 / rem大小 = 实际 rem 的值。

艰难的抉择 —— 定位

  • 固定定位:头尾固定布局非常方便,页面滑动流畅。部分老系统或低版本浏览器中不支持。
  • 绝对定位:头尾固定布局需处理 html、body 高度,页面滑动卡顿。兼容性 ok。

基于移动端的默认样式处理

  1. // 处理手指按下透明遮罩层
  2. a {
  3. -webkit-tap-highlight-color: transparent;
  4. }
  5. // 处理表单元素默认样式
  6. input {
  7. -webkit-appearance: none;
  8. }

课件资料截图:


下午 · Vue 专场

Vue 的特点

  • 响应式的数据绑定,数据一旦改变无需手动操作 DOM,视图自动更新。
  • 可组合的视图组件,把偌大的应用根据功能拆分为一个个颗粒度合理的组件。

Vue 实例生命周期

  • Vue 实例从创建到销毁的过程,就是生命周期。
  • 从开始创建 -> 初始化数据 -> 编译模板 -> 挂载Dom -> 渲染 → 更新 → 渲染 -> 卸载等一系列过程,在每个过程中可以调用各种钩子函数。

v-for 指令中 key 值的作用

  • 更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果删除了第一条数据,Vue 不会重新生成新的元素,而是复用第一个元素,那么添加在第一个元素上的样式将不会清除,甚至会影响页面展示效果。为了给 Vue 一个提示,以便它能跟踪每个节点的身份,需要为每项提供一个唯一 key 属性。

单向数据流

  • Vue 采用的是单向数据流方式,数据只能从父组件流向子组件,子组件不能修改父组件传入的数据,否则 Vue 会给予警告。

组件间的通信

  • 组件是独立作用域的实例,组件可被复用,展示不同数据的时候,需要给组件传入数据。
  • 组件内部的状态改变不会影响其他组件,父组件要关心子组件状态,使用自定义事件监听。

  • 父组件 —-> 子组件 使用 prop 传递参数。

  • 子组件 —-> 父组件 使用自定义事件监听状态变化。

slot 分发内容

  • 为了让组件可以组合,使用一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发。Vue.js 实现了一个内容分发 API,使用特殊的 元素作为原始内容的插槽。
  • 使用slot的好处就是可以定制个性化组件结构。

实现子组件双向数据绑定

  • 让组件的 v-model 生效,实现双向数据绑定,则必须满足两个条件:
    1. 接受一个 value 属性。
    2. 在有新的 value 时触发 input 事件。

异步组件

  • 在大型应用中,可能需要将应用拆分为多个小模块,按需从服务器下载。Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义。在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。

vue-cli 脚手架中 webpack 的配置分析

  • vue-cli 脚手架帮助我们写好基础代码,它具备生成目录结构、本地开发调试、代码部署、热加载、单元测试等功能。
  • vue-cli 是使用 webpack 做的构建工具。解读生成项目目录的配置文件源码,分析了 webpack 的基本配置,以及生成在内存文件和热加载使用的中间件。

课件资料截图:


链接: https://pan.baidu.com/s/1bpnIemV

密码: dwb9


上午活动现场照片:







下午活动现场照片:






相关链接:《免费学习“移动端+Vue、响应式+react”邀请函》
http://www.miaov.com/index.php/news/newsDetail/nid/118


注意!!活动还未结束,下期技术分享活动内容:

响应式布局 + BootStrap + 响应式实战 + react + JSX + props + 事件处理器 + 组件库……

下期技术分享活动日期:5月7日(周日)

下期活动地址:北京 · 西二旗 · 辉煌国际大厦

想参加的小伙伴们,赶快报名去吧!!!

免费活动报名方式:

  • QQ:2852509866、2852509867、2852509868
  • TEL:010-57269690
  • 在线时间:周一至周五 9 : 30-18 : 00 周六至周日 10 : 00-17 : 00

妙味网友
请登录后留言,请登录注册