当前播放: 08 | 理解单文件组件
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
课程目录
第一章:基础篇 (17讲)
01 | 课程介绍
免费
02 | Vue简介
免费
03 | 内容综述
免费
04 | 第一个Vue程序
免费
05 | 组件基础及组件注册
免费
06 | Vue组件的核心概念:事件
免费
07 | Vue组件的核心概:插槽
免费
08 | 理解单文件组件
09 | 双向绑定和单向数据流不冲突
10 | 理解虚拟DOM及key属性的作用
11 | 如何触发组件的更新
12 | 合理应用计算属性和侦听器
13 | 生命周期的应用场景和函数式组件
14 | 指令的本质是什么
15 | 常用高级特性provide/inject
16 | 如何优雅地获取跨层级组件实例(拒绝递归)
17 | template和JSX的对比以及它们的本质
第二章:生态篇 (13讲)
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 | 生态篇习题解答(下)
第三章:实战篇 (21讲)
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 | 如何做好组件的单元测试
第四章:福利篇 (2讲)
52 | 如何发布组件到npm
53 | GitHub相关生态应用(持续集成、单测覆盖率、文档发布、issue管理)
08 | 理解单文件组件

08 | 理解单文件组件

唐金州
一点资讯前端技术专家,Ant Design Vue 作者
53讲 53课时,约500分钟10631
单独订阅¥129
2人成团¥99
12
登录 后留言

精选留言(31)

  • 滴流乱转小胖子
    老师这节插槽的课,我跟评论区其他小伙伴的感受是一样的。 没看明白! 没看明白!没看明白!

    对照老师你的源码,以及官方文档,理解如下,请老师指导

    1.普通插槽:父->子,父组件传递数据/元素/组件给子组件,子组件定义<slot>占坑

    2.作用域插槽:子->父,子组件<slot>绑定属性,传递(数据)给父组件,父组件通过slot-scope接收子组件传递属性

    3.使用v-slot新语法,代替旧语法

    4.多插槽时使用具名插槽方式(<slot name="header">),用于将数据绑定在指定的插槽
    2019-03-24
    12
  • H拉裤兜儿
    程序都是现成的,您在那读,咋跟啊?父组件咋引的自组件都不说直接就是demo演示,忍了三节课了,标题党0.0,,,,,能退不?
    2019-08-04
    1
    6
  • leo_chen
    感觉插槽这一章节讲的有点简单,对于普通插槽和作用域插槽是否可以加一下实际案例呢,比如使用场景等等
    2019-03-19
    5
  • 北执
    老师,插槽在vue项目中大多时候是用来做什么的?在什么时候会用到?
    2019-03-19
    3
  • 我在神游
    建议老师可以每个章节手敲代码,详细讲解。直接拿一个dom出来说一下,整个文件结构这些我们都不是很懂,从网上拿下代码,运行结果的样式跟你讲解的不是一样的,可能是什么文件漏掉了。麻烦老师讲解详细一点,辛苦了
    2019-04-06
    2
  • 阿文
    好的视频就是越看越觉得好。一时觉得快的,可以慢慢看,多看几遍。我非常喜欢这种精简干货,以后时间长了,想回头看某个知识点,也不会觉得啰嗦。
    我觉得不管什么样的学习都是要反复几遍的,大神NB。

    作者回复: 👍

    2019-03-31
    2
  • 椰树
    上面的同学都说到 slot 会合并,v-slot会替换,没错。
    我补充一点,如果slot + slot-scope 的话,会替换。
    2019-04-11
    1
  • geeeee
    如果在组件内部定义了两个重名的具名插槽
    <div>
        <slot name="title"></slot>
        <slot name="title"></slot>
    </div>

    父组件:
    <SlotDemo>
         <template v-slot:title>
                <p>title slot1</p>
                <p>title slot2</p>
              </template>
    </SlotDemo>

    结果:
    title slot1
    title slot2
    title slot1
    title slot2
    2019-04-10
    1
  • 🚶🏻
    老师 补录的课程在哪里啊 没找到呢~ 对于一个小白来说,确实稍微难懂了一些,是不是需要在把vue.js所有的概念先了解一下啊?但是觉得太多了 也记不住啊。
    2019-04-02
    1
  • 跳动的心
    在index.vue 代码中有
    import BigProps from "./BigProps";
    export default {
      components: {
        Props,
        Event,
        SlotDemo: Slot,
        BigProps
      },
    其中 SlotDemo: Slot, 代表 什么意思?
    2019-03-30
    1
  • 夏凯
    老师,对于一个刚开始学习vue的新手老说, 一直在强调的三大核心概念,结果加起来只有十几分钟的课程,说实话,这部分我看了两遍,依然很蒙圈。 我甚至现在还不知道你说的 插槽 是干什么用的,只知道slot就是插槽,是不是需要硬着头皮往后继续看才能明白呢? 另外, 老师在课后留的题目,说实话,完全无法回答,是不是得先看看vue的基础知识,再来看你的这些课程呢? 我以为从你的这期课程能对vue有个比较整体的理解,谢谢老师!
    2019-03-28
    1
  • huanghui
    尝试了一下,新语法是直接替换,老语法是合并~
    2019-03-28
    1
  • IGNACE
    router–view和slot区别是啥

    作者回复: Router-view 是全局函数式组件,就像你自己写的一个组件注册为全局差不多,slot更像是一个占位属性,编译时替换成 $slots.xxx 但说到底都是匹配组件然后渲染组件,形式不一样而已

    2019-03-25
    1
  • 深爱Vue的小迷弟
    老师 我想问下 我vue-cli版本是3.5以上的 也是用的vue create my-pro 去创建的 但是我把您github 代码复制下来没有效果也不报错 用Ready.Detected Vue 去看了有事件 就是您的Event.vue里面的效果不生效 是不是还需要配置什么环境呢?
    2019-03-19
    1
  • Borg
    我就看你操作,你说对就对

    作者回复: 我都不好意思反驳了 😃

    2019-12-12
  • echo
    老师,我有个疑问:在一个项目刚创建的时候,安装的node版本,在后续的话,可以任意更新吗?比如项目初期可能装的是4.x,我现在想升级为10.x。这个对整个项目会有大多影响

    作者回复: 建议试一试,影响不大 或许会有一点兼容性问题

    2019-12-12
  • 呵呵
    老师能把一些常用插件说一下吗,我的.Vue文件没有高亮,看起来很吃力

    作者回复: Vscode 安装 Vetur 插件

    2019-11-24
  • 刘冲
    VUU官网写的是这么垃圾,唉

    作者回复: 官网写的还可以的吧 不过作为官方的文档,更加书面一些

    2019-11-23
  • 王冠凯
    老师,初涉前端插槽这块有点不明白,比如作用域插槽:
    <template v-slot:item="props">
                <p>item slot-scope {{ props }}</p>
              </template>
    这里面的props 对应 <slot name="item" v-bind="{ value: 'vue' }" /> 组简里的v-bind是吧,这两个是怎么关联的。或者说 v-slot:item="props" 有什么作用, 通过name=”item“不就 可以关联上了吗?直接把v-bind的替换成{{props}} 就行了,不明白这个的作用,不知道问题描述明白了没有
    2019-04-17
  • Geek_f93d58
    老师,函数式组件是不要求唯一根元素的吗?

    作者回复: 使用render的确可以绕过唯一根元素的限制的,不过用template的时候,lint校验过不了

    2019-04-12
收起评论
看过的人还看
玩转webpack

程柳锋  腾讯高级工程师,IVWEB团队社区和工程化负责人

84讲 | 5458 人已学习

拼团 ¥79 原价 ¥99
趣谈网络协议

刘超  网易研究院云计算技术部首席架构师

51讲 | 39734 人已学习

拼团 ¥79 原价 ¥99
MySQL实战45讲

林晓斌  网名丁奇,前阿里资深技术专家

48讲 | 43504 人已学习

拼团 ¥79 原价 ¥99
重学前端

程劭非(winter)  前手机淘宝前端负责人

58讲 | 33048 人已学习

¥99