Vue 开发实战 
60939 人已学习
新⼈⾸单¥59
课程目录
已完结/共 53 讲
第一章：基础篇 (17讲)
时长 03:56
时长 03:42
时长 02:25
时长 11:36
时长 13:42
时长 06:56
时长 13:34
时长 15:14
时长 06:31
时长 14:52
时长 07:12
时长 07:25
时长 09:12
时长 09:23
时长 05:17
时长 07:49
时长 06:53
第二章：生态篇 (13讲)
时长 05:10
时长 11:49
时长 05:28
时长 13:57
时长 09:22
时长 04:01
时长 03:53
时长 02:45
时长 29:42
时长 05:17
时长 06:36
第三章：实战篇 (21讲)
时长 05:34
时长 05:10
时长 14:01
时长 25:22
时长 34:11
时长 32:12
时长 18:59
时长 14:57
时长 21:04
时长 14:14
时长 14:55
时长 08:36
时长 13:42
时长 26:06
时长 15:33
时长 14:46
时长 13:56
时长 18:22
时长 10:29
时长 07:19
时长 09:41
第四章：福利篇 (2讲)
时长 04:29
Vue 开发实战
登录|注册
当前播放: 05 | 组件基础及组件注册
00:00 / 00:00
高清
- 高清
1.0x
- 2.0x
- 1.5x
- 1.25x
- 1.0x
- 0.75x
- 0.5x
付费课程，可试看
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管理）
本节摘要
推荐阅读
源代码及课件地址
https://gitee.com/geektime-geekbang/geektime-vue-1
Vue 组件基础
https://cn.vuejs.org/v2/guide/components.html
组件注册
https://cn.vuejs.org/v2/guide/components-registration.html
属性
https://cn.vuejs.org/v2/guide/components-props.html
内容要点
每一个 Vue 组件其实就是一个 Vue 实例，而 Vue 实例是通过 new Vue 函数创建的，不同的组件不过是这个 options 配置对象不同，我们业务开发的 90% 以上的代码都是在围绕配置这个 options 对象展开。
组件的三大核心概念：属性、事件和插槽。
登录 后留言
全部留言(52)
- 最新
- 精选
我想问一下，vue文件如何使用外部js呢？
作者回复: 这要看外部js提供的使用方式，大部分直接 npm install xxx就可以使用，有些可能仅支持script src方式，这本身和用不用vue没有关系
2019-03-25
13
海味大神
这里有个小坑特附上解决方法。
我是Win10系统，发现没有热更新，Chrome一直报WDS：Disconnected.
这里直接修改npm script
"scripts": {
"serve": "vue-cli-service serve --host localhost",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
也就是在serve后面指定locallhost就行了
作者回复: 👍
2019-04-05
2
9
林夕之梦
老师你能把windows版本写一份吗？很多还是用的windows系统的
作者回复: 咱们课程和系统版本没关系，应该没有涉及到系统之间兼容性的问题，你指的是哪部分？
2019-04-01
5
PG_kyrie
老师，按照您说的，我安装了vetur跟eslint，应该会有代码错误提示的，但是还是没有，是什么原因呀
作者回复: https://github.com/tangjinzhou/geektime-vue-1/blob/master/vscode-setting.json 我的配置文件 仅供参考
2019-03-30
5
upup
突然发现封面照片是不是老师年轻的是靓照啊
作者回复: 现在也很年轻啊 😓
2020-04-05
3
烟雨海花lwl
二刷，放慢速度过一遍，做笔记。扫雷知识误区，梳理知识盲点，补充知识更新。像这个作用域插槽绑定数据的方式，接着在父级取得使用，我觉得超棒，加强学习中
作者回复: 👍
2019-04-23
3
卷
初学者，环境是win10+webstorm+vue2.6.10,slot部分，v-slot会报错，网上查了一下，改成说是废弃的写法正确：
<span slot="item" slot-scope="itemProps" :style="{fontSize: '20px', color:itemProps.checked? 'red':'blue'}">
{{item}}
</span>
不过我查到这种写法是2.6之前的，2.6改成v-slot，但是不知道为什么v-slot不行，这种写法可以
作者回复: v-slot不支持原生标签，如span 可以用template包一层
2019-05-13
2
Geek_mzry
wo不用使用 vue create <project>提示使用以下命令
npm uninstall -g vue-cli
npm install -g @vue/cli
但是vue版本还是2.9.5
作者回复: 我没有碰到过这个问题，这里有篇文章你可以试试看 https://juejin.im/post/5bf7d67c51882518805acb1a
2019-03-31
3
2
姜文
<todo-item v-for='item in list' data-test='123' :title='item.title' :isDel='item.isDel'></todo-item>
模板内props: {
title: String,
isDel: {
type: Boolean,
},
},
给子组件传参默认小写,取isdel，如果props属性isDel是大写就会映射不到，取默认值。
作者回复: is-del 转成下划线
2020-06-20
1
少帥
老师，为什么我的template里面的代码只能写成这样：template:
'<li><span v-if="!del">{{title}}</span><span v-else style="text-decoration-line: line-through">{{title}}</span><button v-show="!del">删除</button></li>'
我把那个html分行写就会报错
,
作者回复: 注意是、、不是单引号 可以查阅es6字符串模板知识
2020-03-13
1
收起评论