iView 实战系列教程(21课时)

iView 实战系列教程(21课时)

21讲 · 680 人学习

限时优惠:¥249.00 299.00 立省 50 元

Aresn

Hi,我是 Aresn,基于 Vue.js 的开源 UI 组件库 — iView 的作者。现担任大数据公司 TalkingData 前端架构师。畅销书籍《Vue.js实战》的作者(Vue.js 作者尤雨溪作序)。除了前端,也对 Python、Hybrid、Electron 等技术感兴趣。
更多关于我的内容可以查看这篇文章:https://segmentfault.com/a/11...

课程目录

各节课详细介绍请点击单个课程查看。(课程共 21 节)
购买本课程的同学,可享受 8 折开通 iView Developer 黄金会员 或 钻石会员
(请联系管理员微信 talkingcoder 开通)。

课程源码:https://segmentfault.com/l/15...
购买须知:本课程为虚拟产品,一经购买,概不退款

1. iView 实战教程之配置篇

  • 全局配置
  • 自定义主题配置
  • 国际化(多语言)配置
  • iview-loader 用法及配置

2. iView 实战教程之导航、路由、鉴权篇

  • 3.0 的导航菜单跳转方式
  • 根据当前路由自动选中对应的菜单
  • 在路由级别对页面做鉴权
  • 根据不同平台动态路由不同组件

3. iView 实战教程之布局篇(一)

  • Grid 的基本用法
  • Grid 的使用技巧
  • Grid 响应式布局用法

4. iView 实战教程之布局篇(二)

  • Layout 各组件讲解及源码分析
  • 常见的布局模式分析和详细配置
  • 实战:利用 Layout 及其它组件,完成后台框架搭建

5. iView 实战教程之布局篇(三)

  • 实战 1:后台框架 Dashboard 页的搭建
  • 实战 2:后台框架设置页面(含响应式)
  • 要求:尽可能多的利用 iView 内置的组件;尽可能少的写 CSS 样式和 JS 逻辑

6. iView 实战教程之表格 Table 篇(一)

  • 服务端分页及自定义序号
  • 服务端分页并排序、过滤
  • 前端分页并排序、过滤

7. iView 实战教程之表格 Table 篇(二)

  • 可编辑单元格
  • 可编辑行

8. iView 实战教程之表格 Table 篇(三)

  • 在外部进行表格的搜索、过滤、隐藏某列的操作
  • 作业:将搜索、过滤的逻辑,修改为前端完成

9. iView 实战教程之表格 Table 篇(四)

  • 初始化时应用排序,并持久化存储
  • 初始化时应用过滤,并持久化存储
  • 动态修改任意单元格 class
  • Table 常用 API 讲解:minWidth、maxWidth、tooltip

10. iView 实战教程之表格 Table 篇(五)

  • 自定义列模板的三种方法:

    1. 纯 Render 实现
    2. Render 一个组件实现
    3. slot-scope 实现
  • 使用作用域插槽(slot-scope)代替 Render 的使用方法

11. iView 实战教程之表单 Form 篇(一)

  • Form 表单验证的常用验证规则讲解
  • Form 设置表单验证规则的多种方式
  • iView 表单组件的 element-id 属性和 FormItem 的 label-for 属性用法

12. iView 实战教程之表单 Form 篇(二)

  • Form 表单组件的联动用法
  • 第三方表单组件(自定义的表单组件)与 iView Form 的验证集成
  • Form 同步提交(提交到后端)表单的用法

13. iView 实战教程之表单 Form 篇(三)

  • 巧用元素的禁用属性
  • 新建和修改共用一个 Form 组件的最佳实践(多个循环)
  • 不使用 Form 自带的验证,自行验证数据

14. iView 实战教程之组件用法精讲(一)

  • 传组件 Upload—手动上传
  • 上传组件 Upload—与七牛云等 CDN 的结合
  • 上传组件 Upload—选择文件后,上传前显示缩略图

15. iView 实战教程之组件用法精讲(二)

  • Tabs 标签页关闭前二次确认
  • Tree 组件点击项目标题可以展开/收起的方法
  • 在某个元素中展开 Drawer 组件(非全屏)
  • 模态框组件 Modal—异步提交不关闭

16. iView 实战教程之组件用法精讲(三)

  • DatePicker 设置仅当月日期可选
  • 多个 DatePicker 联动的用法
  • 使用 Select 组件封装一个省市区联动选择器

17. iView 实战教程之技巧篇(一)

  • iView 内置工具函数—递归寻找组件
  • iView 内置工具函数—深度拷贝(deepCopy)
  • 其它常用内置工具函数

18. iView 实战教程之技巧篇(二)

  • 一种跨组件通信方法(provide / inject)
  • iView 内置指令—clickoutside
  • iView 内置指令—transfer-dom(含全局配置)
  • iView 内置工具—兼容 SSR 的事件绑定

19. iView 实战教程之技巧篇(三)

  • iView 内置混合—模拟 dispatch & broadcast 的 emitter.js
  • iView 内置组件—折叠组件 CollapseTransition

20. iView 实战教程之进阶篇(一)

  • Table 组件使用 slot-scope 替代 Render 函数用法及实现原理(iView 3.2.0 以上版本)
  • Table 组件使用 draggable 属性拖拽排序的用法及实现原理(iView 3.3.0 以上版本)
  • iView 近期版本新功能详解

21. iView 实战教程之进阶篇(二)

  • Vue.js 重要的 API 精讲

22. 答疑课 1(赠送)

  • 课程结束后,针对大家的问题,以直播形式开展答疑课 1

23. 答疑课 2(赠送)

  • 课程结束后,针对大家的问题,以直播形式开展答疑课 2

面向人群

  1. 对 Vue.js 有过了解和使用经验的前端或后端工程师;
  2. 使用或打算使用 iView 的用户;
  3. 想提升开发效率、学习 Vue 开发技巧的开发者;

购买须知:
1、本课程为虚拟产品,一经购买,概不退款(讲师特别声明除外)
2、课程购买成功,可通过网站、APP、小程序端观看
3、在使用过程中,遇到任何问题,请邮件联系:pr@sifou.com

版权声明:讲者在本产品上发表的全部原创内容(包括但不限于文字、视频、图片等)著作权均归讲师本人所有。未经讲师授权许可,观众用户不得以任何载体或形式使用讲师的内容。

4.929条评价

hw123 · 2 天前

老师, this.$refs.form.validate valid 为true 后能对 this.$refs.form 中某个formItem 设置error 不, 还是说需要单独 对每个formitem 设置error 双向绑定

naclcr · 7月3日

能不能安排一下,讲解根据权限,设置不同路由,并且根据获取到的权限,调整页面按钮的功能呢。

hanhailin · 4月29日

talkingcoder是谁的?

梅文 · 4月22日

小程序打不开,一直转圈中。。。。。。。。。

Aresn · 4月22日

联系一下客服看看

kakukyowu · 4月20日

有个问题请教:
vue + typescript + iview(3.4.0)
在main.ts 中配置多语言 (i18n+iview)
Vue.locale = () => {};
这句总是报错,如果使用js的话是没问题的,但是换成ts就是不行。
这个问题有办法解决吗?

陈毅文 · 4月15日

安装 vue-cli-plugin-iview 出现错误提示 The "path" argument must be of type string. Received type undefined 【vue-cil 3.6.1,3.6.0可创建项目,但无法安装,3.5.5无法创建项目】

万俟逍 · 3月26日

有没有QQ群或者微信群呢?有了问题去哪里提啊?

Aresn · 4月15日

联系管理员 talkingcoder

lc_qq · 2月19日

加群怎么不同意呢?

Aresn · 4月15日

联系管理员 talkingcoder

bitfan · 2月17日

讲座本身是不错滴,内容打五分,但片头动画差评——背景音乐不好听不说,声音还特大,简直可以归为“噪音”。

Aresn · 2月17日

好吧。。。可以快进

In_space_time · 2月12日