Vue 开发实战
唐金州
一点资讯前端技术专家,Ant Design Vue 作者
60939 人已学习
新⼈⾸单¥59
课程目录
已完结/共 53 讲
Vue 开发实战
登录|注册
留言
38
收藏
沉浸
阅读
分享
手机端
回顶部
当前播放: 13 | 生命周期的应用场景和函数式组件
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.75x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
01 | 课程介绍
02 | Vue简介
03 | 内容综述
05 | 组件基础及组件注册
04 | 第一个Vue程序
06 | Vue组件的核心概念:事件
07 | Vue组件的核心概:插槽
08 | 理解单文件组件
09 | 双向绑定和单向数据流不冲突
10 | 理解虚拟DOM及key属性的作用
11 | 如何触发组件的更新
12 | 合理应用计算属性和侦听器
13 | 生命周期的应用场景和函数式组件
14 | 指令的本质是什么
15 | 常用高级特性provide/inject
16 | 如何优雅地获取跨层级组件实例(拒绝递归)
17 | template和JSX的对比以及它们的本质
18 | 为什么需要Vuex
19 | 如何在Vue中使用Vuex
20 | Vuex核心概念及底层原理
21 | Vuex最佳实践
22 | Vue Router的使用场景
23 | 选择何种模式的路由及底层原理
24 | Nuxt解决了哪些问题?
25 | Nuxt核心原理是什么?
26 | UI组件库对比:Element UI、Ant Design Vue、iView
27 | 提升开发效率和体验的常用工具:ESLint、Prettier、vue-devtools
28 | 单元测试的重要性及其使用
29 | 生态篇习题解答(上)
30 | 生态篇习题解答(下)
31 | Ant Design Pro介绍
32 | 使用Vue CLI 3快速创建项目
33 | 如何自定义Webpack和Babel配置
34 | 如何设计一个高扩展性的路由
35 | 实现一个可动态改变的页面布局
36 | 如何将菜单和路由结合
37 | 如何使用路由管理用户权限
38 | 更加精细化的权限设计(权限组件、权限指令)
39 | 如何在组件中使用ECharts、Antv等其他第三方库
40 | 如何高效地使用Mock数据进行开发
41 | 如何与服务端进行交互(Axios)
42 | 创建一个普通表单
43 | 初始数据、自动校验、动态赋值
44 | 创建一个分步表单
45 | 自己封装一个支持自动校验的表单项
46 | 如何管理系统中使用的图标
47 | 如何定制主题及动态切换主题
48 | 如何做好国际化
49 | 如何高效地构建打包发布
50 | 如何构建可交互的组件文档
51 | 如何做好组件的单元测试
52 | 如何发布组件到npm
53 | 结课测试&GitHub相关生态应用(持续集成、单测覆盖率、文档发布、issue管理)
本节摘要
登录 后留言

全部留言(38)

  • 最新
  • 精选
zhangbao
老师好,听了您的课,感觉收获良多。 特别是本节用函数式组件实现临时变量,和前面讲的虚拟 DOM 的 difff 算法(我就是用 index 绑定 key 的银)。 不过,本节介绍声明周期函数的时候,我看到控制台打印处 render 了,但是代码里好像没有看到“render”钩子函数呢?

作者回复: Render 日志是在模板中写的 你再好好看看

2019-03-19
6
young
老师,学习这课程还是得一步一个脚印不能太快了啊! 前面有同学提了没有输出render的提示,我也遇到了,但是我发前render是通过模板中调用window.console.log('render')来实现r ,我想问下为什么render不提供钩子呢?? 还有个问题就是示例代码中的import moment from "moment";我没有找到moment这个文件

作者回复: moment是一个第三方包,在package.json中有依赖。 为什么没有render这个问题,到后面template和jsx的本质的时候你就懂了。 模板的渲染就是render的执行

2019-04-09
4
、怦然心动 ~
函数式组件讲的太简单了,ctx.scopedSlots.default && ctx.scopedSlots.default(ctx.props || {}) 这个都不知道啥意思,咋就在模板中就可以接收传递变量了?

作者回复: 作用域插槽的本质是方法,而这个方法就是scopedSlots.xxx 这个方法接收的参数就是传递的变量 其实等价于 <slot v-bind="props"/>

2020-02-16
2
zker-non
临时变量 有些不清楚,这个函数式组件的template中的两个 临时变量 var1和 var2 只是方便我们引用 `helll ${name}` 和 destroyClock ? 'hello vue' : 'hello world' 这个两个响应式 语句的结果值吗? 如果我们在<template>中要多次使用 到TempVar 组件上设置的某些 props 的值, 这个临时变量就变得方便了?

作者回复: 是,不再需要重复判断执行 destroyClock ? 'hello vue' : 'hello world'

2019-04-06
2
娜娜
老师,您好,Functional中的props是从哪定义的

作者回复: 函数式组件可以不用声明props,也是这个特点,可以让我们很方便的达到临时变量的目的

2019-04-01
1
ただの観です。
老师你好,这一节讲到了利用函数式组件创建临时变量,但是函数式组件内部的return部分的代码我看不懂啊,老师能讲解一下吗?感激不尽QAQ

作者回复: 看完Template本质那一章节变懂了

2019-06-28
JKJF
希望老师详细讲解一下 render函数 不是很理解

作者回复: 后面 template和jsx本质 那一章节有介绍

2019-05-07
卓铭
唐老师,有人问过我,如果在created里面写了一个计时器,这样会造成什么问题。我不知道怎么回答

作者回复: 脱离上下文的问题都是耍流氓

2019-04-27
此处显示网名
老师我有个问题请教下,我的vue用了el-table 但是我修改界面的数据,data里面的数据并没有发生变化,我怎么才能实现双向绑定

作者回复: 你这个是element组件吧,问题的原因有很多种可能,单凭你这个描述我没法知道具体原因,建议你去element的官方仓库下提issue

2019-04-17
2
爱烤火的鱼
前辈,我一直不明白this。$nextTick有什么用,应用场景在哪里。

作者回复: 最经典的场景就是需要操作DOM,因为当数据改变后,vue并不承诺所有子组件全部更新完毕,如果你想要拿到最终状态的DOM(如果不是最终状态,获取到的DOM宽高滚动位置都有可能不准确),这时候就需要放在nextTick中

2019-04-04
2
收起评论