Vue3.0为什么学？学什么？怎么学？

Posted 2022-08-22 黑马程序员官方

看到有人说要弄懂为什么学？学什么？怎么学？黑马本文来给大家解决这三点问题。

一、为什么学Vue？

虽然是废话还是要提一句：适应市场学习流行的技术提高自己的竞争力，为了找工作、涨薪。

Vue3现状：

• vue-next 2020年09月18日，正式发布vue3.0版本。但是由于刚发布周边生态不支持，大多数开发者处于观望。
• 现在主流组件库都已经发布了支持vue3.0的版本，其他生态也在不断地完善中，这是趋势。
  • element-plus 基于 Vue 3.0 的桌面端组件库
  • vant vant3.0版本，有赞前端团队开源移动端组件库
  • ant-design-vue Ant Design Vue 2.0版本，社区根据蚂蚁 ant design 开发

Vue3优点：

• 最火框架，它是国内最火的前端框架之一，官方文档中文文档
• 性能提升，运行速度事vue2.x的1.5倍左右
• 体积更小，按需编译体积比vue2.x要更小
• 类型推断，更好的支持Ts（typescript）这个也是趋势
• 高级给予，暴露了更底层的API和提供更先进的内置组件
• ★组合API (composition api) ，能够更好的组织逻辑，封装逻辑，复用逻辑

Vue3展望：

• 这是趋势，越来越多的企业将来肯定会升级到Vue3.0
• 大型项目，由于对Ts的友好越来越多大型项目可以用Vue3.0

二、Vue入门学什么

Vue应该学习的内容如下：

• 1. 掌握 webpack 工程化的开发模式；
• 2. 掌握 Vue 常用的指令；
• 3. 掌握如何使用 vue-cli 快速创建工程化的 Vue 项目；
• 4. 掌握 SFC 单文件组件的各种详细用法；
• 5. 掌握如何实现组件之间的数据共享；
• 6. 掌握 Vue 项目中如何正确配置和使用 axios；
• 7. 掌握自定义指令、过滤器、插槽的使用；
• 8. 掌握 vue-router 的使用；
• 9. 掌握 vue-devtools 调试工具的使用；
• 10. 掌握 ref、动态组件、$nextTick 的使用；
• 11. 掌握 Vant、Element-UI 组件库的使用；
• 12. 能够使用 Vue 实现企业级项目的开发。

入门应该掌握的内容是：

• 能够知道vue的基本使用步骤
• 掌握插值表达式和v-bind指令的用法
• 能够掌握如何使用v-on指令绑定事件
• 能够使用v-model指令实现数据的双向绑定
• 能够使用v-if和v-else指令实现条件渲染
• 能够使用v-for指令实现列表数据的循环渲染

高效的学习方式为看课程——>做demo——>无论大小的实战——>项目源码——>总结心得。

三、Vue怎么学？

基础学习：如果能看进去官方文档就直接看文档学习，尤其VUE 3.0对我们太友好了，中文文档+最佳实践都很友好。看不进去就找一套教程看课，跟着老师走一遍，也可以快速建立对框架的认识。（建议搭配着学是最好的）

学习内容：组件、路由、管理状态、查找&显示、Auth App、CRUD App

项目驱动：在这个阶段中，可以从零开发一个完整的项目，从项目配置到组件拆分，到项目打包和上线的完整流程，还可以重新认识一些底层源码级知识。

最后将自己的项目好好完善一下，或者是GitHub上面找到一套自己感兴趣的项目。基本上就可以找工作了，毕竟各个企业招聘实习生还是比较宽容的。

Vue课程导航：

黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程_哔哩哔哩_bilibili黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程共计555条视频，包括：Vue基础-00课程介绍、Vue2.0-01学习目标1、Vue2.0-02工程化的概念、Vue2.0-03了解webpack的概念、Vue2.0-04.webpack基础 - 初始化隔行变色的案例、Vue2.0-05.webpack基础 - 安装和配置webpack、Vue2.0-06.webpack基础 - 了解mode可选值的应用场景、Vue2.0-07.webpack基础 - 指定webpack的entry和output、Vue2.0-08.插件 - 安装和配置webpack-dev-server这个插件、Vue2.0-09.插件 - 介绍webpack-dev-server的工作原理、Vue2.0-10.插件 - 安装和配置html-webpack-plugin这个插件、Vue2.0-11.插件 - 了解html-webpack-plugin插件的特性、Vue2.0-12.插件 - 了解devServer中常用的选项、Vue2.0-13.loader - 说明loader的作用、Vue2.0-14.loader - 了解loader调用的过程、Vue2.0-15.loader - 打包处理less文件、Vue2.0-16.loader - 回顾base64的图片优缺点、Vue2.0-17.loader - 演示图片loader加载的问题、Vue2.0-18.loader - 配置加载图片的loader、Vue2.0-19.loader - 介绍webpack处理样式的过程、Vue2.0-20.loader - url-loader的limit选项、Vue2.0-21.loader - 使用babel-loader转换处理高级的JS语法、Vue2.0-22.发布 - 配置build命令、Vue2.0-23.发布 - 优化图片和js文件的存放路径、Vue2.0-24.发布 - 配置和使用clean-webpack-plugin插件自动删除dist目录、Vue2.0-25.发布 - 总结发布的主要流程、Vue2.0-26.SourceMap - 开发模式下如何配置SourceMap、Vue2.0-27.SourceMap - 在发布项目的时候出于安全性考虑建议关闭SourceMap、Vue2.0-28.SourceMap - SourceMap的最佳实践、Vue2.0-29.拓展 - 讲解webpack中@的原理和好处、Vue2.0-30.拓展 - 在Chrome浏览器中安装vue-devtools调试工具、Vue2.0-01.简介 - 了解vue是什么、Vue2.0-02.简介 - vue的两个特性、Vue2.0-03.简介 - mvvm、Vue2.0-04.vue基础用法 - 初步使用vue、Vue2.0-05.vue基础用法 - 体验vue调试工具和数据驱动视图、Vue2.0-06.vue基础用法 - 内容渲染指令、Vue2.0-07.vue基础用法 - el属性的使用注意点、Vue2.0-08.vue基础用法 - 属性绑定指令、Vue2.0-09.vue基础用法 - 在插值和属性绑定中编写JS语句、Vue2.0-10.事件绑定 - 了解v-on指令的基本用法、Vue2.0-11.事件绑定 - 处理函数的简写形式、Vue2.0-12.事件绑定 - 通过this访问数据源中的数据、Vue2.0-13.事件绑定 - 绑定事件并传参、Vue2.0-14.事件绑定 - v-on指令的简写形式、Vue2.0-15.事件绑定 - $event、Vue2.0-16.事件绑定 - 事件修饰符、Vue2.0-17.上午小结、Vue2.0-18.事件绑定 - 按键修饰符、Vue2.0-19.双向绑定 - 了解v-model指令的用法、Vue2.0-20.双向绑定 - v-model的修饰符、Vue2.0-21.条件渲染 - 了解v-if和v-show的区别、Vue2.0-22.条件渲染 - v-if配套的指令、Vue2.0-23.列表渲染 - 了解v-for的基本用法、Vue2.0-24.列表渲染 - 强调v-for循环中key值的注意点、Vue2.0-25.案例 - 演示案例需求、Vue2.0-26.案例 - 循环渲染表格行的数据、Vue2.0-27.案例 - 练习中遇到的小问题、Vue2.0-28.案例 - 动态生成checkbox的id属性值、Vue2.0-29.案例 - 实现删除品牌的功能、Vue2.0-30.案例 - 判断用户填写的内容是否为空、Vue2.0-31.案例 - 实现添加的功能、Vue2.0-32.总结、Vue2.0-01.过滤器 - 过滤器的基本用法、Vue2.0-02.过滤器 - 使用Vue.filter定义全局过滤器、Vue2.0-03.过滤器 - 使用全局过滤器格式化时间、Vue2.0-04.过滤器 - 过滤器的其它用法、Vue2.0-05.侦听器 - 了解侦听器基本的语法格式、Vue2.0-06.侦听器 - 判断用户名是否被占用、Vue2.0-07.侦听器 - immediate选项、Vue2.0-08.侦听器 - deep选项、Vue2.0-09.侦听器 - 用法总结、Vue2.0-10.计算属性 - 了解计算属性的应用场景、Vue2.0-11.计算属性 - 了解计算属性的语法和特点、Vue2.0-12.axios - 使用axios发起基本的GET请求、Vue2.0-13.axios - 结合async和await调用axios、Vue2.0-14.axios - 使用解构赋值、Vue2.0-15.axios - 基于axios.get和axios.post发起请求、Vue2.0-16.vue-cli - 介绍并安装vue-cli、Vue2.0-17.vue-cli - 演示如何基于vue-cli创建vue项目、Vue2.0-18.vue-cli - 把项目跑起来看效果、Vue2.0-19.vue-cli - 介绍项目的目录结构、Vue2.0-20.vue-cli - 了解src目录的构成、Vue2.0-21.vue-cli - 了解vue项目运行的过程、Vue2.0-22.vue-cli - 组件的基本使用、Vue2.0-23.vue组件 - 组件的三个组成部分、Vue2.0-24.vue组件 - 在组件中定义methods方法、Vue2.0-25.vue组件 - 启用less语法以及唯一根节点、Vue2.0-01.复习、Vue2.0-02.组件 - 使用组件的三个步骤、Vue2.0-03.组件 - 在App根组件中使用Right组件、Vue2.0-04.组件 - 在VScode中配置@路径提示的插件、Vue2.0-05.组件 - 使用Vue.component全局注册组件、Vue2.0-06.组件 - auto close tag自动闭合标签的插件、Vue2.0-07.props - 为count组件声明props自定义属性、Vue2.0-08.props - 结合v-bind使用自定义属性、Vue2.0-09.props - props是只读的、Vue2.0-10.props - default默认值、Vue2.0-11.props - type值类型、Vue2.0-12.props - required必填项、Vue2.0-13.样式冲突 - 了解scoped的使用和底层实现原理、Vue2.0-14.样式冲突 - 使用deep修改子组件中的样式、Vue2.0-15.vue组件的实例对象、Vue2.0-16.生命周期 - 了解生命周期和生命周期函数的概念、Vue2.0-17.生命周期 - 初步了解组件创建的过程、Vue2.0-18.生命周期 - 了解beforeCreate和created生命周期函数的特点、Vue2.0-19.生命周期 - 了解beforeMount和mounted生命周期函数、Vue2.0-20.生命周期 - 组件运行阶段的生命周期函数、Vue2.0-21.生命周期 - 组件销毁阶段的生命周期函数、Vue2.0-22.父向子传值 - 使用自定义属性、Vue2.0-23.父向子传值 - 演示、Vue2.0-24.父向子传值 - 不要修改props的值、Vue2.0-25.子向父传值 - 自定义事件、Vue2.0-26.兄弟组件数据共享 - EventBus、Vue2.0-27.兄弟组件数据共享 - 演示EventBus的使用、Vue2.0-28.总结、Vue2.0-01.复习 - 组件之间数据共享的三种方案、Vue2.0-02.ref - 使用ref引用DOM元素、Vue2.0-03.ref - 使用ref引用组件实例、Vue2.0-04.ref - 初步实现按钮和文本框的按需展示、Vue2.0-05.ref - 了解this.$nextTick的应用场景、Vue2.0-06.ref - 演示updated为啥不行、Vue2.0-07.数组中的方法 - some循环、Vue2.0-08.数组中的方法 - every循环、Vue2.0-09.数组中的方法 - reduce的基本用法、Vue2.0-10.数组中的方法 - reduce的简化写法、Vue2.0-11.购物车案例 - 导入、注册、使用Header组件、Vue2.0-12.购物车案例 - 基于axios请求列表数据、Vue2.0-13.购物车案例 - 请求回来的数据转存到data中、Vue2.0-14.购物车案例 - 循环渲染Goods组件、Vue2.0-15.购物车案例 - 为Goods组件封装title和pic属性、Vue2.0-16.购物车案例 - 为Goods组件封装price和state属性、Vue2.0-17.购物车案例 - 分析封装props两种方案的优缺点对比、Vue2.0-18.购物车案例 - 分析如何修改商品的勾选状态、Vue2.0-19.购物车案例 - 自定义state-change事件、Vue2.0-20.购物车案例 - 修改对应商品的勾选状态、Vue2.0-21.购物车案例 - 定义fullState计算属性、Vue2.0-22.购物车案例 - 把全选状态传递给Footer子组件、Vue2.0-23.购物车案例 - 实现全选功能、Vue2.0-24.购物车案例 - 计算商品的总价格、Vue2.0-25.购物车案例 - 把购买数量传给counter组件、Vue2.0-26.购物车案例 - 准备要发送给App的数据、Vue2.0-27.购物车案例 - 实现数量值的修改、Vue2.0-28.购物车案例 - 动态计算已勾选商品的数量、实现数量的减法操作、Vue2.0-01.课程内容介绍、Vue2.0-02.动态组件 - 介绍component标签的基础用法、Vue2.0-03.动态组件 - 动态切换组件的展示与隐藏、Vue2.0-04.动态组件 - keep-alive的使用、Vue2.0-05.动态组件 - 学习keep-alive组件的include和exclude属性、Vue2.0-06.动态组件 - 了解组件注册名称和组件声明时name的区别、Vue2.0-07.插槽 - 了解插槽的基本用法、Vue2.0-08.插槽 - v-slot指令、Vue2.0-09.插槽 - v-slot的简写形式以及插槽的后备内容、Vue2.0-10.插槽 - 具名插槽的定义和使用、Vue2.0-11.插槽 - 作用域插槽的基本用法、Vue2.0-12.插槽 - 作用域插槽的解构赋值、Vue2.0-13.插槽 - 基于slot插槽改造购物车案例 - 1、Vue2.0-14.插槽 - 基于slot插槽改造购物车案例 - 2、Vue2.0-15.插槽 - 基于slot插槽改造购物车案例 - 3、Vue2.0-16.自定义指令 - 私有自定义指令的基础用法、Vue2.0-17.自定义指令 - 使用binding.value获取指令绑定的值、Vue2.0-18.自定义指令 - update函数、Vue2.0-19.自定义指令 - 函数简写形式、Vue2.0-20.自定义指令 - 全局自定义指令、Vue2.0-21.关于main.js中的小提示、Vue2.0-22.eslint - 了解eslint的作用、Vue2.0-23.eslint - 了解.eslintrc.js配置文件中的rules规则、Vue2.0-24.eslint - 初步了解ESLint的语法规则、Vue2.0-25.eslint - 了解常用的ESLint语法规则、Vue2.0-26.eslint - 配置VSCode、Vue2.0-27.eslint - 配置默认格式化文档的方式、Vue2.0-28.axios - 演示axios的基本用法并发现存在的问题、Vue2.0-29.axios - 把axios挂载到Vue的原型上并配置请求根路径、Vue2.0-30.axios - 了解直接把axios挂载到Vue原型上的缺点、Vue2.0-01.路由概念 - 了解前端路由的概念、Vue2.0-02.路由的概念 - 前端路由的工作方式、Vue2.0-03.路由的概念 - 手动模拟简易的前端路由、Vue2.0-04.路由的基本用法 - 安装和配置路由、Vue2.0-05.路由的基本用法 - 小注意点、Vue2.0-06.路由的基本用法 - 在路由模块中声明路由的对应关系、Vue2.0-07.路由的基本用法 - 使用router-link替代a链接、Vue2.0-08.路由的基本用法 - redirect重定向、Vue2.0-09.嵌套路由 - 声明子级路由链接和占位符、Vue2.0-10.嵌套路由 - 声明嵌套路由的规则、Vue2.0-11.嵌套路由 - 默认子路由、Vue2.0-12.动态路由 - 基本用法、Vue2.0-13.动态路由 - 为路由规则开启props传参、Vue2.0-14.动态路由 - 拓展query和fullPath、Vue2.0-15.编程式导航跳转 - push、replace、go、Vue2.0-16.导航守卫 - 了解导航守卫的基本用法、Vue2.0-17.导航守卫 - next函数的三种调用方式、Vue2.0-18.导航守卫 - 控制访问权限、Vue2.0-19.案例 - 安装和配置路由、Vue2.0-20.案例 - 基于路由渲染登录组件、Vue2.0-21.案例 - 模拟登录功能、Vue2.0-22.案例 - 说明Token认证时token的格式、Vue2.0-23.案例 - 实现后台主页的基础布局、Vue2.0-24.案例 - 退出登录并控制访问权限、Vue2.0-25.案例 - 实现子路由的嵌套展示、Vue2.0-26.案例 - 点击进入用户详情页、Vue2.0-27.案例 - 升级用户详情页的路由规则、Vue2.0-28.案例 - 路由path的注意点、Vue2.0-29.案例 - 拓展 - 如何控制页面的权限、Vue2.0-01.初始化 - 创建并梳理项目结构、Vue2.0-02.初始化 - 安装和配置Vant组件库、Vue2.0-03.初始化 - 使用Tabbar组件并开启路由模式、Vue2.0-04.初始化 - 通过路由展示对应的Tabbar页面、Vue2.0-05.初始化 - 使用Navbar组件、Vue2.0-06.初始化 - 覆盖Navbar的默认样式、Vue2.0-07.文章列表 - 了解获取列表数据的API接口、Vue2.0-08.文章列表 - 封装utils目录下的request模块、Vue2.0-09.文章列表 - 在Home组件中封装initArticleList方法、Vue2.0-10.文章列表 - 封装articleAPI模块、Vue2.0-11.文章列表 - 封装ArticleInfo组件、Vue2.0-12.文章列表 - 为ArticleInfo组件封装props属性、Vue2.0-13.文章列表 - 为ArticleInfo组件封装cover属性、Vue2.0-14.上拉加载更多 - 了解List组件的基本用法、Vue2.0-15.上拉加载更多 - 初步使用List组件、Vue2.0-16.上拉加载更多 - 实现上拉加载更多的效果、Vue2.0-17.下拉刷新 - 实现下拉刷新的功能、Vue2.0-18.定制主题 - 说明Vant定制主题的核心原理、Vue2.0-19.定制主题 - 直接覆盖主题变量、Vue2.0-20.定制主题 - less的正确打开方式、Vue2.0-21.定制主题 - 通过theme.less定制主题 - 推荐形式、Vue2.0-22.最后、Vue基础-阶段总结、铺垫知识-00.学习目标、铺垫知识-01.ES6模块化 - 什么是ES6模块化、铺垫知识-02.ES6模块化 - 在node.js中体验ES6模块化、铺垫知识-03.ES6模块化 - 默认导出与默认导入、铺垫知识-04.ES6模块化 - 默认导出与默认导入的注意事项、铺垫知识-05.ES6模块化 - 按需导出与按需导入、铺垫知识-06.ES6模块化 - 按需导出与按需导入的注意事项、铺垫知识-07.ES6模块化 - 直接导入并执行模块中的代码、铺垫知识-08.Promise - 回调地狱以及Promise的作用、铺垫知识-09.Promise - Promise的基本概念、铺垫知识-10.Promise - 基于then-fs异步的读取文件内容、铺垫知识-11.Promise - 基于Promise按顺序读取文件的内容、铺垫知识-12.Promise - 通过.catch方法捕获错误、铺垫知识-13.Promise - Promise.all和Promise.race方法的使用、铺垫知识-14.Promise - 基于Promise封装异步读文件的方法 - 上、铺垫知识-15.Promise - 基于Promise封装异步读文件的方法 - 下、铺垫知识-16.async和await - 了解async和await的基本使用、铺垫知识-17.async和await - async和await的使用注意事项、铺垫知识-18.EventLoop - 同步任务和异步任务、铺垫知识-19.EventLoop - 同步任务和异步任务的执行过程、铺垫知识-20.EventLoop - EventLoop的概念及经典面试题、铺垫知识-21.宏任务和微任务 - 宏任务与微任务的概念、铺垫知识-22.宏任务和微任务 - 举例分析宏任务和微任务的执行过程、铺垫知识-23.宏任务和微任务 - 经典面试题 - 1、铺垫知识-24.宏任务和微任务 - 经典面试题 - 2、铺垫知识-25.API接口案例 - 初始化项目、铺垫知识-26.API接口案例 - 创建db数据库操作模块、铺垫知识-27.API接口案例 - 创建user_ctrl模块、铺垫知识-28.API接口案例 - 创建并使用user_router路由模块、铺垫知识-29.API接口案例 - 使用try...catch捕获异常错误、铺垫知识-30.总结、Vue3.0-00.学习目标1、Vue3.0-01.工程化 - 了解前端工程化的概念、Vue3.0-02.webpack基础 - 了解什么是webpack、Vue3.0-03.webpack基础 - 初始化列表隔行变色的案例、Vue3.0-04.webpack基础 - 安装和配置webpack、Vue3.0-05.webpack基础 - mode的可选值、Vue3.0-06.webpack基础 - webpack.config.js文件的作用、Vue3.0-07.webpack基础 - 修改打包的入口与出口、Vue3.0-08.webpack插件 - 了解插件的作用、Vue3.0-09.webpack插件 - 安装和配置webpack-dev-server、Vue3.0-10.webpack插件 - 访问自动打包生成的文件、Vue3.0-11.webpack插件 - 安装和配置html-webpack-plugin、Vue3.0-12.webpack插件 - 了解html-webpack-plugin的两个注意点、Vue3.0-13.webpack插件 - 删除dist目录不会影响项目的正常运行、Vue3.0-14.webpack插件 - devServer节点、Vue3.0-15.loader加载器 - 了解loader的概念以及调用过程、Vue3.0-16.loader加载器 - 打包处理css文件、Vue3.0-17.loader加载器 - 打包处理less文件、Vue3.0-18.loader加载器 - 打包处理样式表中与url路径相关的文件、Vue3.0-19.loader加载器 - url-loader的limit参数、Vue3.0-20.loader加载器 - loader的另一种配置方式、Vue3.0-21.loader加载器 - 配置babel-loader、Vue3.0-22.打包发布 - 了解项目打包发布的原因、Vue3.0-23.打包发布 - 配置webpack的打包发布、Vue3.0-24.打包发布 - 整理dist目录下的文件、Vue3.0-25.打包发布 - 自动清理dist目录下的旧文件、Vue3.0-26.打包发布 - 了解企业级项目的打包发布、Vue3.0-27.SourceMap - 了解什么是SourceMap、Vue3.0-28.SourceMap - 开发环境下的SourceMap选项、Vue3.0-29.SourceMap - 生产环境下的SourceMap选项以及最佳实践、Vue3.0-30.总结、Vue3.0-00.学习目标2、Vue3.0-01.vue简介 - 什么是vue、Vue3.0-02.vue简介 - vue的特性、Vue3.0-03.vue简介 - vue的版本、Vue3.0-04.vue的基本使用 - vue的基本使用步骤、Vue3.0-05.vue的基本使用 - 基本代码与MVVM的对应关系、Vue3.0-06.vue的基本使用 - 安装并使用vue-devtools、Vue3.0-07.指令 - 内容渲染指令、Vue3.0-08.指令 - 属性绑定指令、Vue3.0-09.指令 - 使用javascript表达式、Vue3.0-10.指令 - 事件绑定指令、Vue3.0-11.指令 - 事件绑定的简写形式、Vue3.0-12.指令 - 事件对象event、Vue3.0-13.指令 - 事件传参和$event、Vue3.0-14.指令 - 事件修饰符、Vue3.0-15.指令 - 按键修饰符、Vue3.0-16.指令 - 双向绑定指令、Vue3.0-17.指令 - v-model指令的修饰符、Vue3.0-18.指令 - 条件渲染指令、Vue3.0-19.指令 - v-if和v-show的区别、Vue3.0-20.指令 - v-else和v-else-if、Vue3.0-21.指令 - 列表渲染指令、Vue3.0-22.指令 - 使用key维护列表的状态、Vue3.0-23.指令 - key的使用注意事项、Vue3.0-24.过滤器 - 声明和使用过滤器、Vue3.0-25.过滤器 - 私有过滤器和全局过滤器、Vue3.0-26.过滤器 - 连续调用多个过滤器、Vue3.0-27.过滤器 - 过滤器传参、Vue3.0-28.过滤器 - 了解过滤器的兼容性、Vue3.0-29.案例 - 创建基本的vue实例、Vue3.0-30.案例 - 循环渲染表格的数据、Vue3.0-31.案例 - 把状态列渲染为switch开关效果、Vue3.0-32.案例 - 使用全局过滤器格式化时间、Vue3.0-33.案例 - 实现添加品牌的功能、Vue3.0-34.案例 - 快速清空文本框的内容、Vue3.0-35.案例 - 实现删除品牌的功能、Vue3.0-36.总结、Vue3.0-00.学习目标3、Vue3.0-01.SPA - 了解单页面应用程序的概念及特点、Vue3.0-02.SPA - 了解单页面应用程序的优缺点、Vue3.0-03.SPA - 了解vue中创建工程化SPA项目的两种方案、Vue3.0-04.vite - 基于vite创建工程化的vue项目、Vue3.0-05.vite - 梳理项目的基本结构、Vue3.0-06.vite - 了解vite项目的运行流程、Vue3.0-07.组件 - 了解组件化的开发思想、Vue3.0-08.组件 - 组件的3个组成部分、Vue3.0-09.组件 - template节点的基本使用、Vue3.0-10.组件 - script节点的基本使用、Vue3.0-11.组件 - script中的data节点、Vue3.0-12.组件 - script中的methods节点、Vue3.0-13.组件 - style节点的基本使用、Vue3.0-14.组件的注册 - 了解注册组件的两种方式、Vue3.0-15.组件的注册 - 全局注册组件、Vue3.0-16.组件的注册 - 局部注册组件、Vue3.0-17.组件的注册 - 全局注册和局部注册的区别、Vue3.0-18.组件的注册 - 组件注册时名称的大小写、Vue3.0-19.组件的注册 - 把组件的name属性作为注册时的名称、Vue3.0-20.样式冲突 - 了解导致组件之间样式冲突的原因、Vue3.0-21.样式冲突 - 解决组件之间样式冲突的问题、Vue3.0-22.样式冲突 - deep样式穿透、Vue3.0-23.props - 了解props的概念、Vue3.0-24.props - 了解props的基本使用、Vue3.0-25.props - 无法使用未声明的props、Vue3.0-26.props - 动态绑定props的值、Vue3.0-27.props - props的大小写命名、Vue3.0-28.class与style绑定 - 动态绑定HTML元素的class、Vue3.0-29.class与style绑定 - 以数组语法动态绑定HTML元素的class、Vue3.0-30.class与style绑定 - 以对象语法动态绑定HTML元素的class、Vue3.0-31.class与style绑定 - 以对象语法动态绑定内联的style、Vue3.0-32.案例 - 了解案例的效果以及封装的要求、Vue3.0-33.案例 - 实现MyHeader组件的封装、Vue3.0-34.总结、Vue3.0-00.学习目标4、Vue3.0-01.props验证 - 了解什么是props验证、Vue3.0-02.props验证 - 多个可能的类型、Vue3.0-03.props验证 - 必填项校验、Vue3.0-04.props验证 - 属性默认值、Vue3.0-05.props验证 - 自定义验证函数、Vue3.0-06.计算属性 - 了解计算属性的基本使用、Vue3.0-07.计算属性 - 计算属性vs方法、Vue3.0-08.计算属性 - 介绍计算属性案例的需求、Vue3.0-09.计算属性 - 动态计算已勾选商品的总数量、Vue3.0-10.计算属性 - 动态计算总价格和结算按钮的状态、Vue3.0-11.自定义事件 - 了解什么是自定义事件、Vue3.0-12.自定义事件 - 了解自定义事件的3个使用步骤、Vue3.0-13.自定义事件 - 演示自定义事件的具体使用、Vue3.0-14.自定义事件 - 自定义事件传参、Vue3.0-15.组件上的v-model - 了解为什么要在组件上使用v-model指令、Vue3.0-16.组件上的v-model - 实现父向子同步数据、Vue3.0-17.组件上的v-model - 实现子向父同步数据、Vue3.0-18.案例 - 案例效果及整体实现步骤、Vue3.0-19.案例 - 初始化项目、Vue3.0-20.案例 - 梳理项目结构、Vue3.0-21.案例 - 封装todo-list组件 - 创建并注册TodoList组件、Vue3.0-22.案例 - 封装todo-list组件 - 基于bootstrap渲染列表组件、Vue3.0-23.案例 - 封装todo-list组件 - 为TodoList声明props属性、Vue3.0-24.案例 - 封装todo-list组件 - 循环渲染TodoList组件的数据、Vue3.0-25.案例 - 封装todo-list组件 - 使用v-model双向绑定复选框的状态、Vue3.0-26.案例 - 封装todo-list组件 - 为已完成的任务添加删除效果、Vue3.0-27.案例 - 封装todo-input组件 - 创建并注册TodoInput组件、Vue3.0-28.案例 - 封装todo-input组件 - 基于bootstrap渲染组件、Vue3.0-29.案例 - 封装todo-input组件 - 通过自定义事件向外传递数据、Vue3.0-30.案例 - 封装todo-input组件 - 实现添加新任务的功能、Vue3.0-31.案例 - 封装todo-button组件 - 创建并注册TodoButton组件、Vue3.0-32.案例 - 封装todo-button组件 - 渲染TodoButton组件的结构、Vue3.0-33.案例 - 封装todo-button组件 - 通过props指定默认激活的按钮、Vue3.0-34.案例 - 封装todo-button组件 - 通过v-model更新激活项的索引、Vue3.0-35.案例 - 封装todo-button组件 - 通过计算属性动态切换列表的数据、Vue3.0-36.总结、Vue3.0-00.学习目标5、Vue3.0-01.watch - 了解watch侦听器的基础用法、Vue3.0-02.watch - 检测用户名是否可用、Vue3.0-03.watch - immediate选项、Vue3.0-04.watch - deep选项、Vue3.0-05.watch - 监听对象中单个属性的变化、Vue3.0-06.watch - 计算属性和侦听器的区别、Vue3.0-07.生命周期 - 了解组件生命周期的概念、Vue3.0-08.生命周期 - 通过生命周期函数监听组件的不同时刻、Vue3.0-09.生命周期 - 通过updated监听组件的重新渲染、Vue3.0-10.生命周期 - 主要的生命周期函数、Vue3.0-11.生命周期 - 完整的生命周期函数、Vue3.0-12.数据共享 - 组件之间的关系、Vue3.0-13.数据共享 - 父组件向子组件共享数据、Vue3.0-14.数据共享 - 子组件向父组件共享数据、Vue3.0-15.数据共享 - 实现父子组件之间数据的双向同步、Vue3.0-16.数据共享 - 了解EventBus的原理、Vue3.0-17.数据共享 - 基于EventBus实现兄弟组件之间的数据共享、Vue3.0-18.数据共享 - 基于provide和inject实现数据共享、Vue3.0-19.数据共享 - 基于provide向下共享响应式的数据、Vue3.0-20.数据共享 - 了解vuex的概念及好处、Vue3.0-21.数据共享 - 总结组件之间实现数据共享的6种方案、Vue3.0-22.全局配置axios - 了解如何在vue3项目中全局配置axios、Vue3.0-23.全局配置axios - 演示如何在vue3项目中全局配置axios、Vue3.0-24.购物车案例 - 初始化项目结构、Vue3.0-25.购物车案例 - 创建并注册es-header组件、Vue3.0-26.购物车案例 - 封装es-header组件、Vue3.0-27.购物车案例 - 基于axios请求商品列表的数据、Vue3.0-28.购物车案例 - 创建并注册es-footer组件、Vue3.0-29.购物车案例 - 了解es-footer组件的封装要求、Vue3.0-30.购物车案例 - 渲染es-footer组件的DOM结构、Vue3.0-31.购物车案例 - 封装es-footer组件的amount和total属性、Vue3.0-32.购物车案例 - 封装es-footer组件的isfull属性和fullChange事件、Vue3.0-33.购物车案例 - 创建并注册es-goods组件、Vue3.0-34.购物车案例 - 渲染es-goods组件的DOM结构、Vue3.0-35.购物车案例 - 封装es-goods组件的id属性、Vue3.0-36.购物车案例 - 封装es-goods组件的其它属性、Vue3.0-37.购物车案例 - 修改单个商品的勾选状态、Vue3.0-38.购物车案例 - 实现合计、结算数量、全选功能、Vue3.0-39.购物车案例 - 创建并注册es-counter组件、Vue3.0-40.购物车案例 - 渲染es-counter组件的DOM结构、Vue3.0-41.购物车案例 - 实现数值的渲染及加减的操作、Vue3.0-42.购物车案例 - 实现min最小值的处理、Vue3.0-43.购物车案例 - 处理用户在输入框填写的内容、Vue3.0-44.购物车案例 - 在es-counter组件中把数量传递给es-goods组件、Vue3.0-45.购物车案例 - 更新购物车中商品的数量、Vue3.0-46.总结、Vue3.0-00.学习目标6、Vue3.0-01.ref - 使用ref获取DOM元素的引用、Vue3.0-02.ref - 使用ref获取组件的引用、Vue3.0-03.ref - 组件是异步执行DOM更新的、Vue3.0-04.ref - 了解$nextTick函数的作用、Vue3.0-05.动态组件 - 了解component标签的具体使用、Vue3.0-06.动态组件 - 使用keep-alive保持组件的状态、Vue3.0-07.插槽 - 基础用法 - 了解插槽的概念、Vue3.0-08.插槽 - 基础用法 - 了解插槽的基本使用、Vue3.0-09.插槽 - 基础用法 - 插槽的后备内容、Vue3.0-10.插槽 - 具名插槽 - 了解如何声明具名插槽、Vue3.0-11.插槽 - 具名插槽 - 为具名插槽提供内容、Vue3.0-12.插槽 - 具名插槽 - 具名插槽的简写形式、Vue3.0-13.插槽 - 作用域插槽 - 了解作用域插槽的基础用法、Vue3.0-14.插槽 - 作用域插槽 - 解构作用域插槽的Prop、Vue3.0-15.插槽 - 作用域插槽 - 了解作用域插槽的实际应用场景、Vue3.0-16.自定义指令 - 了解自定义指令的概念、Vue3.0-17.自定义指令 - 创建私有自定义指令、Vue3.0-18.自定义指令 - 实现文本框自动获得焦点的功能、Vue3.0-19.自定义指令 - 创建全局自定义指令、Vue3.0-20.自定义指令 - 了解updated函数的执行时机、Vue3.0-21.自定义指令 - 自定义指令的两个注意点、Vue3.0-22.自定义指令 - 获取自定义指令的参数值、Vue3.0-23.Table案例 - 介绍案例的效果以及主要的实现步骤、Vue3.0-24.Table案例 - 初始化项目、Vue3.0-25.Table案例 - 请求商品列表的数据、Vue3.0-26.Table案例 - 封装my-table组件并声明data数据源、Vue3.0-27.Table案例 - 把表头区域封装为header具名插槽、Vue3.0-28.Table案例 - 把表格主体区域封装为body作用域插槽、Vue3.0-29.Table案例 - 实现删除商品的功能、Vue3.0-30.Table案例 - 循环渲染Tag标签、Vue3.0-31.Table案例 - 实现input和button的按需展示、Vue3.0-32.Table案例 - 实现文本框自动获得焦点的功能、Vue3.0-33.Table案例 - 文本框失去焦点自动隐藏、Vue3.0-34.Table案例 - 实现新增Tag标签的功能、Vue3.0-35.总结、Vue3.0-00.学习目标7、Vue3.0-01.路由的概念 - 了解什么是前端路由、Vue3.0-02.路由的概念 - 了解前端路由的工作方式、Vue3.0-03.路由的概念 - 手动模拟实现简易的前端路由、Vue3.0-04.路由基础 - 什么是vue-router、Vue3.0-05.路由基础 - vue-router的基本用法 - 上、Vue3.0-06.路由基础 - vue-router的基本用法 - 下、Vue3.0-07.路由高级 - redirect路由重定向、Vue3.0-08.路由高级 - 了解实现路由高亮的两种方案、Vue3.0-09.路由高级 - 嵌套路由的概念、Vue3.0-10.路由高级 - 实现嵌套路由、Vue3.0-11.路由高级 - 在嵌套路由中使用路由重定向、Vue3.0-12.路由高级 - 动态路由的概念、Vue3.0-13.路由高级 - 获取动态路由参数值的两种方案、Vue3.0-14.路由高级 - 编程式导航、Vue3.0-15.路由高级 - 命名路由的概念及具体用法、Vue3.0-16.路由高级 - 导航守卫 - 了解如何声明全局导航守卫、Vue3.0-17.路由高级 - 导航守卫 - 守卫方法的前两个参数、Vue3.0-18.路由高级 - 导航守卫 - next形参的两个注意点、Vue3.0-19.路由高级 - 导航守卫 - next函数的3种调用方式、Vue3.0-20.路由高级 - 导航守卫 - 结合token控制后台主页的访问权限、Vue3.0-21.案例 - 案例效果展示、Vue3.0-22.案例 - 初始化项目并安装vue-router、Vue3.0-23.案例 - 通过路由展示Login登录组件、Vue3.0-24.案例 - 模拟并实现登录功能、Vue3.0-25.案例 - 通过路由渲染Home后台主页组件、Vue3.0-26.案例 - 实现退出登录的功能、Vue3.0-27.案例 - 全局控制路由的访问权限、Vue3.0-28.案例 - 将左侧菜单改造为路由链接、Vue3.0-29.案例 - 渲染用户列表数据并跳转到用户详情页、Vue3.0-30.案例 - 为用户详情页的路由规则开启props传参、Vue3.0-31.案例 - 通过编程式导航实现后退功能、Vue3.0-32.总结、Vue3.0-00.学习目标8、Vue3.0-01.vue-cli - 安装vue-cli并修改PowerShell的执行权限、Vue3.0-02.vue-cli - 基于vue ui命令创建vue项目、Vue3.0-03.vue-cli - 了解可视化面板左侧菜单的基本使用、Vue3.0-04.vue-cli - 基于vue create命令创建vue项目、Vue3.0-05.vue-cli - 梳理vue2项目的基本结构和main.js中的代码、Vue3.0-06.vue-cli - 在vue2的项目中使用3.x版本的路由 - 上、Vue3.0-07.vue-cli - 在vue2的项目中使用3.x版本的路由 - 下、Vue3.0-08.组件库 - 组件库的概念以及常用的vue组件库、Vue3.0-09.组件库 - 完整引入element-ui、Vue3.0-10.组件库 - 按需引入element-ui、Vue3.0-11.组件库 - 把element-ui组件的导入和注册封装为独立的模块、Vue3.0-12.拦截器 - 了解在vue2的项目中如何全局配置axios、Vue3.0-13.拦截器 - 了解拦截器的概念及典型应用场景、Vue3.0-14.拦截器 - 使用请求拦截器配置Token认证、Vue3.0-15.拦截器 - 使用拦截器实现Loading效果、Vue3.0-16.proxy跨域代理 - 了解proxy跨域代理的工作原理、Vue3.0-17.proxy跨域代理 - 在vue-cli的项目中配置proxy跨域代理、Vue3.0-18.综合案例 - 案例效果展示、Vue3.0-19.综合案例 - 初始化项目、Vue3.0-20.综合案例 - 初始化路由、Vue3.0-21.综合案例 - 使用路由渲染UserList组件、Vue3.0-22.综合案例 - 安装和配置axios、Vue3.0-23.综合案例 - 请求用户列表的数据并解决接口跨域问题、Vue3.0-24.综合案例 - 安装并配置element-ui组件库、Vue3.0-25.综合案例 - 了解Table组件的基本使用、Vue3.0-26.综合案例 - 通过作用域插槽自定义创建时间的渲染格式、Vue3.0-27.综合案例 - 通过插槽渲染操作列的模板结构、Vue3.0-28.综合案例 - 点击按钮展示添加用户的Dialog组件、Vue3.0-29.综合案例 - 渲染添加新用户的Form表单、Vue3.0-30.综合案例 - 实现Form表单的数据验证、Vue3.0-31.综合案例 - 自定义Form表单的验证规则、Vue3.0-32.综合案例 - 在对话框关闭时重置Form表单、Vue3.0-33.综合案例 - 实现添加用户前的表单预验证、Vue3.0-34.综合案例 - 发起请求实现添加用户的功能、Vue3.0-35.综合案例 - 使用Message组件优化消息的提示效果、Vue3.0-36.综合案例 - 使用MessageBox组件询问用户是否删除、Vue3.0-37.综合案例 - 发起请求实现删除用户的功能、Vue3.0-38.综合案例 - 通过声明式导航跳转到用户详情页、Vue3.0-39.综合案例 - 获取并渲染用户列表的数据、Vue3.0-40.综合案例 - 通过axios拦截器实现Loading加载效果、Vue3.0-41.总结等，UP主更多精彩视频，请关注UP账号。https://www.bilibili.com/video/BV1zq4y1p7ga