投稿

黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端学习核心框架教程

302.8万

9.2万

2021-08-04 08:45:08

未经作者授权，禁止转载

知识分享官

黑马程序员发消息

咨询课程1对1就业指导、技术提升直接私信，周一到周五晚7点直播答疑求职技术干货，领取课程源码+资料，关注黑马程序员公众号，回复：领取资源02

Vue基础-00课程介绍

07:52

Vue2.0-01.学习目标1

07:00

Vue2.0-02工程化的概念

15:47

Vue2.0-03了解webpack的概念

07:06

Vue2.0-04.webpack基础 - 初始化隔行变色的案例

18:37

Vue2.0-05.webpack基础 - 安装和配置webpack

24:12

Vue2.0-06.webpack基础 - 了解mode可选值的应用场景

06:23

Vue2.0-07.webpack基础 - 指定webpack的entry和output

18:42

Vue2.0-08.插件 - 安装和配置webpack-dev-server这个插件

09:21

Vue2.0-09.插件 - 介绍webpack-dev-server的工作原理

15:36

Vue2.0-10.插件 - 安装和配置html-webpack-plugin这个插件

16:33

Vue2.0-11.插件 - 了解html-webpack-plugin插件的特性

06:00

Vue2.0-12.插件 - 了解devServer中常用的选项

06:16

Vue2.0-13.loader - 说明loader的作用

10:38

Vue2.0-14.loader - 了解loader调用的过程

11:30

Vue2.0-15.loader - 打包处理less文件

07:31

Vue2.0-16.loader - 回顾base64的图片优缺点

07:23

Vue2.0-17.loader - 演示图片loader加载的问题

05:05

Vue2.0-18.loader - 配置加载图片的loader

07:12

Vue2.0-19.loader - 介绍webpack处理样式的过程

07:28

Vue2.0-20.loader - url-loader的limit选项

05:21

Vue2.0-21.loader - 使用babel-loader转换处理高级的JS语法

20:07

Vue2.0-22.发布 - 配置build命令

12:44

Vue2.0-23.发布 - 优化图片和js文件的存放路径

06:38

Vue2.0-24.发布 - 配置和使用clean-webpack-plugin插件自动删除dist目录

07:24

Vue2.0-25.发布 - 总结发布的主要流程

04:32

Vue2.0-26.SourceMap - 开发模式下如何配置SourceMap

08:35

Vue2.0-27.SourceMap - 在发布项目的时候出于安全性考虑建议关闭SourceMap

04:08

Vue2.0-28.SourceMap - SourceMap的最佳实践

09:04

Vue2.0-29.拓展 - 讲解webpack中@的原理和好处

12:53

Vue2.0-30.拓展 - 在Chrome浏览器中安装vue-devtools调试工具

03:05

Vue2.0-01.简介 - 了解vue是什么

09:39

Vue2.0-02.简介 - vue的两个特性

14:59

Vue2.0-03.简介 - mvvm

10:54

Vue2.0-04.vue基础用法 - 初步使用vue

11:13

Vue2.0-05.vue基础用法 - 体验vue调试工具和数据驱动视图

05:11

Vue2.0-06.vue基础用法 - 内容渲染指令

17:29

Vue2.0-07.vue基础用法 - el属性的使用注意点

02:47

Vue2.0-08.vue基础用法 - 属性绑定指令

09:38

Vue2.0-09.vue基础用法 - 在插值和属性绑定中编写JS语句

11:50

Vue2.0-10.事件绑定 - 了解v-on指令的基本用法

05:50

Vue2.0-11.事件绑定 - 处理函数的简写形式

02:31

Vue2.0-12.事件绑定 - 通过this访问数据源中的数据

04:28

Vue2.0-13.事件绑定 - 绑定事件并传参

02:38

Vue2.0-14.事件绑定 - v-on指令的简写形式

02:07

Vue2.0-15.事件绑定 - $event

11:52

Vue2.0-16.事件绑定 - 事件修饰符

09:19

Vue2.0-17.上午小结

07:26

Vue2.0-18.事件绑定 - 按键修饰符

07:59

Vue2.0-19.双向绑定 - 了解v-model指令的用法

13:58

Vue2.0-20.双向绑定 - v-model的修饰符

12:37

Vue2.0-21.条件渲染 - 了解v-if和v-show的区别

14:48

Vue2.0-22.条件渲染 - v-if配套的指令

06:44

Vue2.0-23.列表渲染 - 了解v-for的基本用法

13:50

Vue2.0-24.列表渲染 - 强调v-for循环中key值的注意点

17:51

Vue2.0-25.案例 - 演示案例需求

01:49

Vue2.0-26.案例 - 循环渲染表格行的数据

12:49

Vue2.0-27.案例 - 练习中遇到的小问题

03:35

Vue2.0-28.案例 - 动态生成checkbox的id属性值

06:25

Vue2.0-29.案例 - 实现删除品牌的功能

05:23

Vue2.0-30.案例 - 判断用户填写的内容是否为空

08:47

Vue2.0-31.案例 - 实现添加的功能

07:46

Vue2.0-32.总结

05:24

Vue2.0-01.过滤器 - 过滤器的基本用法

20:56

Vue2.0-02.过滤器 - 使用Vue.filter定义全局过滤器

11:49

Vue2.0-03.过滤器 - 使用全局过滤器格式化时间

14:57

Vue2.0-04.过滤器 - 过滤器的其它用法

04:37

Vue2.0-05.侦听器 - 了解侦听器基本的语法格式

11:35

Vue2.0-06.侦听器 - 判断用户名是否被占用

08:12

Vue2.0-07.侦听器 - immediate选项

06:58

Vue2.0-08.侦听器 - deep选项

08:09

Vue2.0-09.侦听器 - 用法总结

05:40

Vue2.0-10.计算属性 - 了解计算属性的应用场景

08:59

Vue2.0-11.计算属性 - 了解计算属性的语法和特点

11:42

Vue2.0-12.axios - 使用axios发起基本的GET请求

14:10

Vue2.0-13.axios - 结合async和await调用axios

09:42

Vue2.0-14.axios - 使用解构赋值

07:37

Vue2.0-15.axios - 基于axios.get和axios.post发起请求

08:47

Vue2.0-16.vue-cli - 介绍并安装vue-cli

09:25

Vue2.0-17.vue-cli - 演示如何基于vue-cli创建vue项目

22:14

Vue2.0-18.vue-cli - 把项目跑起来看效果

04:56

Vue2.0-19.vue-cli - 介绍项目的目录结构

07:19

Vue2.0-20.vue-cli - 了解src目录的构成

07:07

Vue2.0-21.vue-cli - 了解vue项目运行的过程

09:16

Vue2.0-22.vue-cli - 组件的基本使用

08:10

Vue2.0-23.vue组件 - 组件的三个组成部分

12:19

Vue2.0-24.vue组件 - 在组件中定义methods方法

06:08

Vue2.0-25.vue组件 - 启用less语法以及唯一根节点

04:23

Vue2.0-01.复习

16:13

Vue2.0-02.组件 - 使用组件的三个步骤

16:01

Vue2.0-03.组件 - 在App根组件中使用Right组件

01:19

Vue2.0-04.组件 - 在VScode中配置@路径提示的插件

05:54

Vue2.0-05.组件 - 使用Vue.component全局注册组件

10:44

Vue2.0-06.组件 - auto close tag自动闭合标签的插件

02:47

Vue2.0-07.props - 为count组件声明props自定义属性

15:04

Vue2.0-08.props - 结合v-bind使用自定义属性

05:10

Vue2.0-09.props - props是只读的

10:20

Vue2.0-10.props - default默认值

05:47

Vue2.0-11.props - type值类型

04:28

Vue2.0-12.props - required必填项

07:06

Vue2.0-13.样式冲突 - 了解scoped的使用和底层实现原理

12:11

Vue2.0-14.样式冲突 - 使用deep修改子组件中的样式

11:37

Vue2.0-15.vue组件的实例对象

07:35

Vue2.0-16.生命周期 - 了解生命周期和生命周期函数的概念

09:57

Vue2.0-17.生命周期 - 初步了解组件创建的过程

09:14

Vue2.0-18.生命周期 - 了解beforeCreate和created生命周期函数的特点

20:34

Vue2.0-19.生命周期 - 了解beforeMount和mounted生命周期函数

15:23

Vue2.0-20.生命周期 - 组件运行阶段的生命周期函数

10:49

Vue2.0-21.生命周期 - 组件销毁阶段的生命周期函数

04:57

Vue2.0-22.父向子传值 - 使用自定义属性

06:44

Vue2.0-23.父向子传值 - 演示

10:04

Vue2.0-24.父向子传值 - 不要修改props的值

04:26

Vue2.0-25.子向父传值 - 自定义事件

23:07

Vue2.0-26.兄弟组件数据共享 - EventBus

09:48

Vue2.0-27.兄弟组件数据共享 - 演示EventBus的使用

10:50

Vue2.0-28.总结

32:58

Vue2.0-01.复习 - 组件之间数据共享的三种方案

10:50

Vue2.0-02.ref - 使用ref引用DOM元素

14:37

Vue2.0-03.ref - 使用ref引用组件实例

12:22

Vue2.0-04.ref - 初步实现按钮和文本框的按需展示

06:25

Vue2.0-05.ref - 了解this.$nextTick的应用场景

14:18

Vue2.0-06.ref - 演示updated为啥不行

02:31

Vue2.0-07.数组中的方法 - some循环

07:24

Vue2.0-08.数组中的方法 - every循环

03:47

Vue2.0-09.数组中的方法 - reduce的基本用法

11:28

Vue2.0-10.数组中的方法 - reduce的简化写法

01:11

Vue2.0-11.购物车案例 - 导入、注册、使用Header组件

09:28

Vue2.0-12.购物车案例 - 基于axios请求列表数据

09:40

Vue2.0-13.购物车案例 - 请求回来的数据转存到data中

03:36

Vue2.0-14.购物车案例 - 循环渲染Goods组件

04:33

Vue2.0-15.购物车案例 - 为Goods组件封装title和pic属性

06:50

Vue2.0-16.购物车案例 - 为Goods组件封装price和state属性

07:41

Vue2.0-17.购物车案例 - 分析封装props两种方案的优缺点对比

11:44

Vue2.0-18.购物车案例 - 分析如何修改商品的勾选状态

18:21

Vue2.0-19.购物车案例 - 自定义state-change事件

09:57

Vue2.0-20.购物车案例 - 修改对应商品的勾选状态

04:57

Vue2.0-21.购物车案例 - 定义fullState计算属性

09:19

Vue2.0-22.购物车案例 - 把全选状态传递给Footer子组件

05:06

Vue2.0-23.购物车案例 - 实现全选功能

06:44

Vue2.0-24.购物车案例 - 计算商品的总价格

08:56

Vue2.0-25.购物车案例 - 把购买数量传给counter组件

09:05

Vue2.0-26.购物车案例 - 准备要发送给App的数据

10:57

Vue2.0-27.购物车案例 - 实现数量值的修改

05:57

Vue2.0-28.购物车案例 - 动态计算已勾选商品的数量、实现数量的减法操作

05:42

Vue2.0-01.课程内容介绍

03:49

Vue2.0-02.动态组件 - 介绍component标签的基础用法

08:50

Vue2.0-03.动态组件 - 动态切换组件的展示与隐藏

04:01

Vue2.0-04.动态组件 - keep-alive的使用

16:12

Vue2.0-05.动态组件 - 学习keep-alive组件的include和exclude属性

06:10

Vue2.0-06.动态组件 - 了解组件注册名称和组件声明时name的区别

08:29

Vue2.0-07.插槽 - 了解插槽的基本用法

10:56

Vue2.0-08.插槽 - v-slot指令

09:38

Vue2.0-09.插槽 - v-slot的简写形式以及插槽的后备内容

04:33

Vue2.0-10.插槽 - 具名插槽的定义和使用

17:56

Vue2.0-11.插槽 - 作用域插槽的基本用法

08:55

Vue2.0-12.插槽 - 作用域插槽的解构赋值

06:26

Vue2.0-13.插槽 - 基于slot插槽改造购物车案例 - 1

08:53

Vue2.0-14.插槽 - 基于slot插槽改造购物车案例 - 2

04:20

Vue2.0-15.插槽 - 基于slot插槽改造购物车案例 - 3

08:48

Vue2.0-16.自定义指令 - 私有自定义指令的基础用法

11:39

Vue2.0-17.自定义指令 - 使用binding.value获取指令绑定的值

06:15

Vue2.0-18.自定义指令 - update函数

06:17

Vue2.0-19.自定义指令 - 函数简写形式

02:54

Vue2.0-20.自定义指令 - 全局自定义指令

05:20

Vue2.0-21.关于main.js中的小提示

02:11

Vue2.0-22.eslint - 了解eslint的作用

05:34

Vue2.0-23.eslint - 了解.eslintrc.js配置文件中的rules规则

17:02

Vue2.0-24.eslint - 初步了解ESLint的语法规则

08:08

Vue2.0-25.eslint - 了解常用的ESLint语法规则

17:15

Vue2.0-26.eslint - 配置VSCode

10:04

Vue2.0-27.eslint - 配置默认格式化文档的方式

03:03

Vue2.0-28.axios - 演示axios的基本用法并发现存在的问题

09:34

Vue2.0-29.axios - 把axios挂载到Vue的原型上并配置请求根路径

09:06

Vue2.0-30.axios - 了解直接把axios挂载到Vue原型上的缺点

08:01

Vue2.0-01.路由概念 - 了解前端路由的概念

16:16

Vue2.0-02.路由的概念 - 前端路由的工作方式

05:46

Vue2.0-03.路由的概念 - 手动模拟简易的前端路由

13:59

Vue2.0-04.路由的基本用法 - 安装和配置路由

15:47

Vue2.0-05.路由的基本用法 - 小注意点

05:31

Vue2.0-06.路由的基本用法 - 在路由模块中声明路由的对应关系

12:04

Vue2.0-07.路由的基本用法 - 使用router-link替代a链接

05:36

Vue2.0-08.路由的基本用法 - redirect重定向

03:52

Vue2.0-09.嵌套路由 - 声明子级路由链接和占位符

08:05

Vue2.0-10.嵌套路由 - 声明嵌套路由的规则

06:09

Vue2.0-11.嵌套路由 - 默认子路由

07:05

Vue2.0-12.动态路由 - 基本用法

17:15

Vue2.0-13.动态路由 - 为路由规则开启props传参

05:18

Vue2.0-14.动态路由 - 拓展query和fullPath

07:54

Vue2.0-15.编程式导航跳转 - push、replace、go

20:07

Vue2.0-16.导航守卫 - 了解导航守卫的基本用法

14:58

Vue2.0-17.导航守卫 - next函数的三种调用方式

03:29

Vue2.0-18.导航守卫 - 控制访问权限

12:46

Vue2.0-19.案例 - 安装和配置路由

07:27

Vue2.0-20.案例 - 基于路由渲染登录组件

05:47

Vue2.0-21.案例 - 模拟登录功能

08:40

Vue2.0-22.案例 - 说明Token认证时token的格式

01:57

Vue2.0-23.案例 - 实现后台主页的基础布局

06:32

Vue2.0-24.案例 - 退出登录并控制访问权限

05:10

Vue2.0-25.案例 - 实现子路由的嵌套展示

13:26

Vue2.0-26.案例 - 点击进入用户详情页

09:55

Vue2.0-27.案例 - 升级用户详情页的路由规则

05:45

Vue2.0-28.案例 - 路由path的注意点

03:38

Vue2.0-29.案例 - 拓展 - 如何控制页面的权限

03:43

Vue2.0-01.初始化 - 创建并梳理项目结构

15:49

Vue2.0-02.初始化 - 安装和配置Vant组件库

16:27

Vue2.0-03.初始化 - 使用Tabbar组件并开启路由模式

18:31

Vue2.0-04.初始化 - 通过路由展示对应的Tabbar页面

05:17

Vue2.0-05.初始化 - 使用Navbar组件

08:48

Vue2.0-06.初始化 - 覆盖Navbar的默认样式

05:35

Vue2.0-07.文章列表 - 了解获取列表数据的API接口

07:50

Vue2.0-08.文章列表 - 封装utils目录下的request模块

13:57

Vue2.0-09.文章列表 - 在Home组件中封装initArticleList方法

08:56

Vue2.0-10.文章列表 - 封装articleAPI模块

24:12

Vue2.0-11.文章列表 - 封装ArticleInfo组件

09:59

Vue2.0-12.文章列表 - 为ArticleInfo组件封装props属性

14:27

Vue2.0-13.文章列表 - 为ArticleInfo组件封装cover属性

11:36

Vue2.0-14.上拉加载更多 - 了解List组件的基本用法

11:44

Vue2.0-15.上拉加载更多 - 初步使用List组件

09:30

Vue2.0-16.上拉加载更多 - 实现上拉加载更多的效果

10:05

Vue2.0-17.下拉刷新 - 实现下拉刷新的功能

18:11

Vue2.0-18.定制主题 - 说明Vant定制主题的核心原理

06:55

Vue2.0-19.定制主题 - 直接覆盖主题变量

12:49

Vue2.0-20.定制主题 - less的正确打开方式

03:39

Vue2.0-21.定制主题 - 通过theme.less定制主题 - 推荐形式

10:18

Vue2.0-22.最后

11:42

Vue基础-阶段总结

02:04

铺垫知识-00.学习目标

01:32

铺垫知识-01.ES6模块化 - 什么是ES6模块化

05:47

铺垫知识-02.ES6模块化 - 在node.js中体验ES6模块化

03:56

铺垫知识-03.ES6模块化 - 默认导出与默认导入

06:06

铺垫知识-04.ES6模块化 - 默认导出与默认导入的注意事项

03:27

铺垫知识-05.ES6模块化 - 按需导出与按需导入

04:47

铺垫知识-06.ES6模块化 - 按需导出与按需导入的注意事项

05:13

铺垫知识-07.ES6模块化 - 直接导入并执行模块中的代码

03:13

铺垫知识-08.Promise - 回调地狱以及Promise的作用

01:57

铺垫知识-09.Promise - Promise的基本概念

05:28

铺垫知识-10.Promise - 基于then-fs异步的读取文件内容

08:32

铺垫知识-11.Promise - 基于Promise按顺序读取文件的内容

06:58

铺垫知识-12.Promise - 通过.catch方法捕获错误

04:23

铺垫知识-13.Promise - Promise.all和Promise.race方法的使用

05:32

铺垫知识-14.Promise - 基于Promise封装异步读文件的方法 - 上

06:37

铺垫知识-15.Promise - 基于Promise封装异步读文件的方法 - 下

06:51

铺垫知识-16.async和await - 了解async和await的基本使用

08:19

铺垫知识-17.async和await - async和await的使用注意事项

05:11

铺垫知识-18.EventLoop - 同步任务和异步任务

04:18

铺垫知识-19.EventLoop - 同步任务和异步任务的执行过程

05:15

铺垫知识-20.EventLoop - EventLoop的概念及经典面试题

03:57

铺垫知识-21.宏任务和微任务 - 宏任务与微任务的概念

03:19

铺垫知识-22.宏任务和微任务 - 举例分析宏任务和微任务的执行过程

03:34

铺垫知识-23.宏任务和微任务 - 经典面试题 - 1

03:24

铺垫知识-24.宏任务和微任务 - 经典面试题 - 2

04:21

铺垫知识-25.API接口案例 - 初始化项目

05:09

铺垫知识-26.API接口案例 - 创建db数据库操作模块

04:41

铺垫知识-27.API接口案例 - 创建user_ctrl模块

06:57

铺垫知识-28.API接口案例 - 创建并使用user_router路由模块

06:33

铺垫知识-29.API接口案例 - 使用try...catch捕获异常错误

03:42

铺垫知识-30.总结

02:49

Vue3.0-00.学习目标1

01:24

Vue3.0-01.工程化 - 了解前端工程化的概念

05:13

Vue3.0-02.webpack基础 - 了解什么是webpack

02:51

Vue3.0-03.webpack基础 - 初始化列表隔行变色的案例

07:11

Vue3.0-04.webpack基础 - 安装和配置webpack

11:19

Vue3.0-05.webpack基础 - mode的可选值

04:15

Vue3.0-06.webpack基础 - webpack.config.js文件的作用

02:08

Vue3.0-07.webpack基础 - 修改打包的入口与出口

07:25

Vue3.0-08.webpack插件 - 了解插件的作用

02:56

Vue3.0-09.webpack插件 - 安装和配置webpack-dev-server

04:17

Vue3.0-10.webpack插件 - 访问自动打包生成的文件

08:39

Vue3.0-11.webpack插件 - 安装和配置html-webpack-plugin

08:36

Vue3.0-12.webpack插件 - 了解html-webpack-plugin的两个注意点

04:03

Vue3.0-13.webpack插件 - 删除dist目录不会影响项目的正常运行

01:35

Vue3.0-14.webpack插件 - devServer节点

03:45

Vue3.0-15.loader加载器 - 了解loader的概念以及调用过程

04:27

Vue3.0-16.loader加载器 - 打包处理css文件

08:55

Vue3.0-17.loader加载器 - 打包处理less文件

05:04

Vue3.0-18.loader加载器 - 打包处理样式表中与url路径相关的文件

05:52

Vue3.0-19.loader加载器 - url-loader的limit参数

04:59

Vue3.0-20.loader加载器 - loader的另一种配置方式

02:22

Vue3.0-21.loader加载器 - 配置babel-loader

07:41

Vue3.0-22.打包发布 - 了解项目打包发布的原因

01:41

Vue3.0-23.打包发布 - 配置webpack的打包发布

04:12

Vue3.0-24.打包发布 - 整理dist目录下的文件

05:19

Vue3.0-25.打包发布 - 自动清理dist目录下的旧文件

03:38

Vue3.0-26.打包发布 - 了解企业级项目的打包发布

00:56

Vue3.0-27.SourceMap - 了解什么是SourceMap

02:18

Vue3.0-28.SourceMap - 开发环境下的SourceMap选项

05:14

Vue3.0-29.SourceMap - 生产环境下的SourceMap选项以及最佳实践

06:38

Vue3.0-30.总结

03:55

Vue3.0-00.学习目标2

01:19

Vue3.0-01.vue简介 - 什么是vue

08:16

Vue3.0-02.vue简介 - vue的特性

09:22

Vue3.0-03.vue简介 - vue的版本

01:52

Vue3.0-04.vue的基本使用 - vue的基本使用步骤

09:36

Vue3.0-05.vue的基本使用 - 基本代码与MVVM的对应关系

01:00

Vue3.0-06.vue的基本使用 - 安装并使用vue-devtools

06:00

Vue3.0-07.指令 - 内容渲染指令

09:56

Vue3.0-08.指令 - 属性绑定指令

05:43

Vue3.0-09.指令 - 使用JavaScript表达式

06:52

Vue3.0-10.指令 - 事件绑定指令

05:14

Vue3.0-11.指令 - 事件绑定的简写形式

02:11

Vue3.0-12.指令 - 事件对象event

03:46

Vue3.0-13.指令 - 事件传参和$event

04:44

Vue3.0-14.指令 - 事件修饰符

08:14

Vue3.0-15.指令 - 按键修饰符

03:47

Vue3.0-16.指令 - 双向绑定指令

05:04

Vue3.0-17.指令 - v-model指令的修饰符

04:50

Vue3.0-18.指令 - 条件渲染指令

03:06

Vue3.0-19.指令 - v-if和v-show的区别

04:10

Vue3.0-20.指令 - v-else和v-else-if

04:04

Vue3.0-21.指令 - 列表渲染指令

04:47

Vue3.0-22.指令 - 使用key维护列表的状态

04:58

Vue3.0-23.指令 - key的使用注意事项

05:00

Vue3.0-24.过滤器 - 声明和使用过滤器

07:21

Vue3.0-25.过滤器 - 私有过滤器和全局过滤器

05:33

Vue3.0-26.过滤器 - 连续调用多个过滤器

02:51

Vue3.0-27.过滤器 - 过滤器传参

02:33

Vue3.0-28.过滤器 - 了解过滤器的兼容性

01:03

Vue3.0-29.案例 - 创建基本的vue实例

07:32

Vue3.0-30.案例 - 循环渲染表格的数据

02:36

Vue3.0-31.案例 - 把状态列渲染为switch开关效果

06:20

Vue3.0-32.案例 - 使用全局过滤器格式化时间

05:15

Vue3.0-33.案例 - 实现添加品牌的功能

07:54

Vue3.0-34.案例 - 快速清空文本框的内容

01:23

Vue3.0-35.案例 - 实现删除品牌的功能

03:33

Vue3.0-36.总结

02:34

Vue3.0-00.学习目标3

01:26

Vue3.0-01.SPA - 了解单页面应用程序的概念及特点

03:21

Vue3.0-02.SPA - 了解单页面应用程序的优缺点

03:48

Vue3.0-03.SPA - 了解vue中创建工程化SPA项目的两种方案

03:24

Vue3.0-04.vite - 基于vite创建工程化的vue项目

03:06

Vue3.0-05.vite - 梳理项目的基本结构

03:46

Vue3.0-06.vite - 了解vite项目的运行流程

09:19

Vue3.0-07.组件 - 了解组件化的开发思想

04:15

Vue3.0-08.组件 - 组件的3个组成部分

01:20

Vue3.0-09.组件 - template节点的基本使用

03:12

Vue3.0-10.组件 - script节点的基本使用

03:20

Vue3.0-11.组件 - script中的data节点

02:21

Vue3.0-12.组件 - script中的methods节点

02:20

Vue3.0-13.组件 - style节点的基本使用

03:51

Vue3.0-14.组件的注册 - 了解注册组件的两种方式

02:20

Vue3.0-15.组件的注册 - 全局注册组件

05:23

Vue3.0-16.组件的注册 - 局部注册组件

02:42

Vue3.0-17.组件的注册 - 全局注册和局部注册的区别

03:27

Vue3.0-18.组件的注册 - 组件注册时名称的大小写

03:27

Vue3.0-19.组件的注册 - 把组件的name属性作为注册时的名称

03:06

Vue3.0-20.样式冲突 - 了解导致组件之间样式冲突的原因

05:54

Vue3.0-21.样式冲突 - 解决组件之间样式冲突的问题

06:06

Vue3.0-22.样式冲突 - deep样式穿透

04:59

Vue3.0-23.props - 了解props的概念

03:13

Vue3.0-24.props - 了解props的基本使用

06:03

Vue3.0-25.props - 无法使用未声明的props

01:59

Vue3.0-26.props - 动态绑定props的值

02:24

Vue3.0-27.props - props的大小写命名

02:37

Vue3.0-28.class与style绑定 - 动态绑定HTML元素的class

05:59

Vue3.0-29.class与style绑定 - 以数组语法动态绑定HTML元素的class

03:01

Vue3.0-30.class与style绑定 - 以对象语法动态绑定HTML元素的class

03:34

Vue3.0-31.class与style绑定 - 以对象语法动态绑定内联的style

03:56

Vue3.0-32.案例 - 了解案例的效果以及封装的要求

01:18

Vue3.0-33.案例 - 实现MyHeader组件的封装

10:22

Vue3.0-34.总结

02:54

Vue3.0-00.学习目标4

01:17

Vue3.0-01.props验证 - 了解什么是props验证

05:03

Vue3.0-02.props验证 - 多个可能的类型

03:23

Vue3.0-03.props验证 - 必填项校验

03:23

Vue3.0-04.props验证 - 属性默认值

02:32

Vue3.0-05.props验证 - 自定义验证函数

03:28

Vue3.0-06.计算属性 - 了解计算属性的基本使用

05:11

Vue3.0-07.计算属性 - 计算属性vs方法

03:32

Vue3.0-08.计算属性 - 介绍计算属性案例的需求

03:06

Vue3.0-09.计算属性 - 动态计算已勾选商品的总数量

04:48

Vue3.0-10.计算属性 - 动态计算总价格和结算按钮的状态

04:55

Vue3.0-11.自定义事件 - 了解什么是自定义事件

02:18

Vue3.0-12.自定义事件 - 了解自定义事件的3个使用步骤

03:18

Vue3.0-13.自定义事件 - 演示自定义事件的具体使用

08:27

Vue3.0-14.自定义事件 - 自定义事件传参

02:22

Vue3.0-15.组件上的v-model - 了解为什么要在组件上使用v-model指令

01:49

Vue3.0-16.组件上的v-model - 实现父向子同步数据

05:58

Vue3.0-17.组件上的v-model - 实现子向父同步数据

04:21

Vue3.0-18.案例 - 案例效果及整体实现步骤

01:50

Vue3.0-19.案例 - 初始化项目

02:02

Vue3.0-20.案例 - 梳理项目结构

03:37

Vue3.0-21.案例 - 封装todo-list组件 - 创建并注册TodoList组件

03:33

Vue3.0-22.案例 - 封装todo-list组件 - 基于bootstrap渲染列表组件

05:00

Vue3.0-23.案例 - 封装todo-list组件 - 为TodoList声明props属性

03:21

Vue3.0-24.案例 - 封装todo-list组件 - 循环渲染TodoList组件的数据

04:30

Vue3.0-25.案例 - 封装todo-list组件 - 使用v-model双向绑定复选框的状态

03:37

Vue3.0-26.案例 - 封装todo-list组件 - 为已完成的任务添加删除效果

02:31

Vue3.0-27.案例 - 封装todo-input组件 - 创建并注册TodoInput组件

04:13

Vue3.0-28.案例 - 封装todo-input组件 - 基于bootstrap渲染组件

02:58

Vue3.0-29.案例 - 封装todo-input组件 - 通过自定义事件向外传递数据

07:29

Vue3.0-30.案例 - 封装todo-input组件 - 实现添加新任务的功能

03:24

Vue3.0-31.案例 - 封装todo-button组件 - 创建并注册TodoButton组件

02:54

Vue3.0-32.案例 - 封装todo-button组件 - 渲染TodoButton组件的结构

02:52

Vue3.0-33.案例 - 封装todo-button组件 - 通过props指定默认激活的按钮

05:25

Vue3.0-34.案例 - 封装todo-button组件 - 通过v-model更新激活项的索引

05:06

Vue3.0-35.案例 - 封装todo-button组件 - 通过计算属性动态切换列表的数据

04:30

Vue3.0-36.总结

02:48

Vue3.0-00.学习目标5

01:34

Vue3.0-01.watch - 了解watch侦听器的基础用法

04:19

Vue3.0-02.watch - 检测用户名是否可用

06:13

Vue3.0-03.watch - immediate选项

04:49

Vue3.0-04.watch - deep选项

04:05

Vue3.0-05.watch - 监听对象中单个属性的变化

04:01

Vue3.0-06.watch - 计算属性和侦听器的区别

01:28

Vue3.0-07.生命周期 - 了解组件生命周期的概念

03:11

Vue3.0-08.生命周期 - 通过生命周期函数监听组件的不同时刻

07:21

Vue3.0-09.生命周期 - 通过updated监听组件的重新渲染

02:40

Vue3.0-10.生命周期 - 主要的生命周期函数

02:48

Vue3.0-11.生命周期 - 完整的生命周期函数

08:45

Vue3.0-12.数据共享 - 组件之间的关系

01:39

Vue3.0-13.数据共享 - 父组件向子组件共享数据

04:19

Vue3.0-14.数据共享 - 子组件向父组件共享数据

04:26

Vue3.0-15.数据共享 - 实现父子组件之间数据的双向同步

03:28

Vue3.0-16.数据共享 - 了解EventBus的原理

03:03

Vue3.0-17.数据共享 - 基于EventBus实现兄弟组件之间的数据共享

08:59

Vue3.0-18.数据共享 - 基于provide和inject实现数据共享

05:33

Vue3.0-19.数据共享 - 基于provide向下共享响应式的数据

04:58

Vue3.0-20.数据共享 - 了解vuex的概念及好处

03:48

Vue3.0-21.数据共享 - 总结组件之间实现数据共享的6种方案

01:50

Vue3.0-22.全局配置axios - 了解如何在vue3项目中全局配置axios

03:37

Vue3.0-23.全局配置axios - 演示如何在vue3项目中全局配置axios

07:34

Vue3.0-24.购物车案例 - 初始化项目结构

06:10

Vue3.0-25.购物车案例 - 创建并注册es-header组件

02:36

Vue3.0-26.购物车案例 - 封装es-header组件

06:06

Vue3.0-27.购物车案例 - 基于axios请求商品列表的数据

07:22

Vue3.0-28.购物车案例 - 创建并注册es-footer组件

02:11

Vue3.0-29.购物车案例 - 了解es-footer组件的封装要求

02:26

Vue3.0-30.购物车案例 - 渲染es-footer组件的DOM结构

07:19

Vue3.0-31.购物车案例 - 封装es-footer组件的amount和total属性

03:21

Vue3.0-32.购物车案例 - 封装es-footer组件的isfull属性和fullChange事件

06:46

Vue3.0-33.购物车案例 - 创建并注册es-goods组件

02:28

Vue3.0-34.购物车案例 - 渲染es-goods组件的DOM结构

07:53

Vue3.0-35.购物车案例 - 封装es-goods组件的id属性

02:41

Vue3.0-36.购物车案例 - 封装es-goods组件的其它属性

06:36

Vue3.0-37.购物车案例 - 修改单个商品的勾选状态

07:54

Vue3.0-38.购物车案例 - 实现合计、结算数量、全选功能

05:44

Vue3.0-39.购物车案例 - 创建并注册es-counter组件

02:27

Vue3.0-40.购物车案例 - 渲染es-counter组件的DOM结构

02:18

Vue3.0-41.购物车案例 - 实现数值的渲染及加减的操作

06:40

Vue3.0-42.购物车案例 - 实现min最小值的处理

03:18

Vue3.0-43.购物车案例 - 处理用户在输入框填写的内容

05:39

Vue3.0-44.购物车案例 - 在es-counter组件中把数量传递给es-goods组件

03:13

Vue3.0-45.购物车案例 - 更新购物车中商品的数量

05:51

Vue3.0-46.总结

03:13

Vue3.0-00.学习目标6

01:28

Vue3.0-01.ref - 使用ref获取DOM元素的引用

07:49

Vue3.0-02.ref - 使用ref获取组件的引用

05:15

Vue3.0-03.ref - 组件是异步执行DOM更新的

07:12

Vue3.0-04.ref - 了解$nextTick函数的作用

03:13

Vue3.0-05.动态组件 - 了解component标签的具体使用

05:19

Vue3.0-06.动态组件 - 使用keep-alive保持组件的状态

04:34

Vue3.0-07.插槽 - 基础用法 - 了解插槽的概念

01:13

Vue3.0-08.插槽 - 基础用法 - 了解插槽的基本使用

03:52

Vue3.0-09.插槽 - 基础用法 - 插槽的后备内容

01:58

Vue3.0-10.插槽 - 具名插槽 - 了解如何声明具名插槽

03:41

Vue3.0-11.插槽 - 具名插槽 - 为具名插槽提供内容

05:30

Vue3.0-12.插槽 - 具名插槽 - 具名插槽的简写形式

01:31

Vue3.0-13.插槽 - 作用域插槽 - 了解作用域插槽的基础用法

06:52

Vue3.0-14.插槽 - 作用域插槽 - 解构作用域插槽的Prop

02:17

Vue3.0-15.插槽 - 作用域插槽 - 了解作用域插槽的实际应用场景

05:31

Vue3.0-16.自定义指令 - 了解自定义指令的概念

01:16

Vue3.0-17.自定义指令 - 创建私有自定义指令

03:00

Vue3.0-18.自定义指令 - 实现文本框自动获得焦点的功能

03:06

Vue3.0-19.自定义指令 - 创建全局自定义指令

03:57

Vue3.0-20.自定义指令 - 了解updated函数的执行时机

04:38

Vue3.0-21.自定义指令 - 自定义指令的两个注意点

03:11

Vue3.0-22.自定义指令 - 获取自定义指令的参数值

03:08

Vue3.0-23.Table案例 - 介绍案例的效果以及主要的实现步骤

01:16

Vue3.0-24.Table案例 - 初始化项目

04:20

Vue3.0-25.Table案例 - 请求商品列表的数据

07:31

Vue3.0-26.Table案例 - 封装my-table组件并声明data数据源

05:08

Vue3.0-27.Table案例 - 把表头区域封装为header具名插槽

04:59

Vue3.0-28.Table案例 - 把表格主体区域封装为body作用域插槽

05:53

Vue3.0-29.Table案例 - 实现删除商品的功能

02:49

Vue3.0-30.Table案例 - 循环渲染Tag标签

02:04

Vue3.0-31.Table案例 - 实现input和button的按需展示

02:47

Vue3.0-32.Table案例 - 实现文本框自动获得焦点的功能

01:33

Vue3.0-33.Table案例 - 文本框失去焦点自动隐藏

04:37

Vue3.0-34.Table案例 - 实现新增Tag标签的功能

04:03

Vue3.0-35.总结

02:05

Vue3.0-00.学习目标7

01:17

Vue3.0-01.路由的概念 - 了解什么是前端路由

04:55

Vue3.0-02.路由的概念 - 了解前端路由的工作方式

02:08

Vue3.0-03.路由的概念 - 手动模拟实现简易的前端路由

09:31

Vue3.0-04.路由基础 - 什么是vue-router

01:54

Vue3.0-05.路由基础 - vue-router的基本用法 - 上

06:01

Vue3.0-06.路由基础 - vue-router的基本用法 - 下

10:04

Vue3.0-07.路由高级 - redirect路由重定向

02:28

Vue3.0-08.路由高级 - 了解实现路由高亮的两种方案

04:59

Vue3.0-09.路由高级 - 嵌套路由的概念

01:15

Vue3.0-10.路由高级 - 实现嵌套路由

08:17

Vue3.0-11.路由高级 - 在嵌套路由中使用路由重定向

02:03

Vue3.0-12.路由高级 - 动态路由的概念

04:55

Vue3.0-13.路由高级 - 获取动态路由参数值的两种方案

04:32

Vue3.0-14.路由高级 - 编程式导航

06:13

Vue3.0-15.路由高级 - 命名路由的概念及具体用法

07:30

Vue3.0-16.路由高级 - 导航守卫 - 了解如何声明全局导航守卫

03:55

Vue3.0-17.路由高级 - 导航守卫 - 守卫方法的前两个参数

03:12

Vue3.0-18.路由高级 - 导航守卫 - next形参的两个注意点

04:05

Vue3.0-19.路由高级 - 导航守卫 - next函数的3种调用方式

04:24

Vue3.0-20.路由高级 - 导航守卫 - 结合token控制后台主页的访问权限

02:44

Vue3.0-21.案例 - 案例效果展示

01:34

Vue3.0-22.案例 - 初始化项目并安装vue-router

03:50

Vue3.0-23.案例 - 通过路由展示Login登录组件

03:37

Vue3.0-24.案例 - 模拟并实现登录功能

05:26

Vue3.0-25.案例 - 通过路由渲染Home后台主页组件

03:45

Vue3.0-26.案例 - 实现退出登录的功能

02:15

Vue3.0-27.案例 - 全局控制路由的访问权限

04:05

Vue3.0-28.案例 - 将左侧菜单改造为路由链接

10:17

Vue3.0-29.案例 - 渲染用户列表数据并跳转到用户详情页

06:41

Vue3.0-30.案例 - 为用户详情页的路由规则开启props传参

01:59

Vue3.0-31.案例 - 通过编程式导航实现后退功能

01:35

Vue3.0-32.总结

02:49

Vue3.0-00.学习目标8

01:30

Vue3.0-01.vue-cli - 安装vue-cli并修改PowerShell的执行权限

06:34

Vue3.0-02.vue-cli - 基于vue ui命令创建vue项目

12:48

Vue3.0-03.vue-cli - 了解可视化面板左侧菜单的基本使用

05:06

Vue3.0-04.vue-cli - 基于vue create命令创建vue项目

07:17

Vue3.0-05.vue-cli - 梳理vue2项目的基本结构和main.js中的代码

05:08

Vue3.0-06.vue-cli - 在vue2的项目中使用3.x版本的路由 - 上

09:05

Vue3.0-07.vue-cli - 在vue2的项目中使用3.x版本的路由 - 下

03:07

Vue3.0-08.组件库 - 组件库的概念以及常用的vue组件库

02:21

Vue3.0-09.组件库 - 完整引入element-ui

05:29

Vue3.0-10.组件库 - 按需引入element-ui

06:13

Vue3.0-11.组件库 - 把element-ui组件的导入和注册封装为独立的模块

02:38

Vue3.0-12.拦截器 - 了解在vue2的项目中如何全局配置axios

05:23

Vue3.0-13.拦截器 - 了解拦截器的概念及典型应用场景

02:02

Vue3.0-14.拦截器 - 使用请求拦截器配置Token认证

06:02

Vue3.0-15.拦截器 - 使用拦截器实现Loading效果

05:42

Vue3.0-16.proxy跨域代理 - 了解proxy跨域代理的工作原理

04:57

Vue3.0-17.proxy跨域代理 - 在vue-cli的项目中配置proxy跨域代理

05:25

Vue3.0-18.综合案例 - 案例效果展示

01:55

Vue3.0-19.综合案例 - 初始化项目

04:40

Vue3.0-20.综合案例 - 初始化路由

02:39

Vue3.0-21.综合案例 - 使用路由渲染UserList组件

03:17

Vue3.0-22.综合案例 - 安装和配置axios

01:57

Vue3.0-23.综合案例 - 请求用户列表的数据并解决接口跨域问题

05:38

Vue3.0-24.综合案例 - 安装并配置element-ui组件库

01:54

Vue3.0-25.综合案例 - 了解Table组件的基本使用

08:07

Vue3.0-26.综合案例 - 通过作用域插槽自定义创建时间的渲染格式

08:51

Vue3.0-27.综合案例 - 通过插槽渲染操作列的模板结构

01:39

Vue3.0-28.综合案例 - 点击按钮展示添加用户的Dialog组件

06:57

Vue3.0-29.综合案例 - 渲染添加新用户的Form表单

06:09

Vue3.0-30.综合案例 - 实现Form表单的数据验证

09:15

Vue3.0-31.综合案例 - 自定义Form表单的验证规则

05:57

Vue3.0-32.综合案例 - 在对话框关闭时重置Form表单

04:32

Vue3.0-33.综合案例 - 实现添加用户前的表单预验证

04:01

Vue3.0-34.综合案例 - 发起请求实现添加用户的功能

04:42

Vue3.0-35.综合案例 - 使用Message组件优化消息的提示效果

02:58

Vue3.0-36.综合案例 - 使用MessageBox组件询问用户是否删除

06:39

Vue3.0-37.综合案例 - 发起请求实现删除用户的功能

06:19

Vue3.0-38.综合案例 - 通过声明式导航跳转到用户详情页

04:02

Vue3.0-39.综合案例 - 获取并渲染用户列表的数据

05:54

Vue3.0-40.综合案例 - 通过axios拦截器实现Loading加载效果

04:20

Vue3.0-41.总结

03:12

顶部