Vue 3.x 全家桶完全指南与实战

课程详情

课程标题:Vue 3.x 全家桶完全指南与实战

本课程全面深入地讲解了Vue 3.x全家桶,包括Vue、TypeScript、Vue Router和Vuex等核心技术,旨在帮助学员全面掌握Vue框架及其周边技术,提升实战能力。

适合人群

  • 有一定HTML、CSS和JavaScript基础的开发者
  • 希望学习Vue 3.x全家桶,提升前端开发技能的学员
  • 希望从事前端开发工作或提升职业竞争力的个人

学习收获

  • 掌握Vue 3.x框架的核心概念和高级特性
  • 熟练使用TypeScript进行Vue开发
  • 深入理解Vue Router和Vuex的工作原理和应用
  • 具备独立开发Vue项目的实战能力

课程亮点

  • 全面覆盖Vue 3.x全家桶,从基础到高级,系统学习
  • 结合实际项目案例,理论与实践相结合,提升实战能力
  • 由浅入深,逐步引导学员掌握Vue开发技巧
  • 提供丰富的学习资源和课后练习,巩固学习成果

课程目录

01 课程介绍
  01 课程介绍.mp4
  02 源码下载.txt
02 快速入门
  01 本章简介.mp4
  02 传统的网页开发方式的弊端.mp4
  03 Vue.js 是什么解决了哪些问题.mp4
  04 引入 Vue 3.x 框架的方式.mp4
  05 开发环境配置.mp4
  06 创建第一个 Vue 3.x 应用.mp4
  07 本章小结.mp4
03 Vue 基础入门
  01 本章简介.mp4
  02 创建并初始化 Vue 项目.mp4
  03 使用 data 提供数据.mp4
  04 在 HTML 属性中绑定 data 中的数据.mp4
  05 展示列表内容.mp4
  06 根据条件展示页面内容.mp4
  07 事件与响应性入门.mp4
  08 使用 computed 计算属性处理稍复杂的业务逻辑.mp4
  09 使用 methods 方法处理事件.mp4
  10 使用 watch 监听数据的变化.mp4
  11 计算属性和方法的区别.mp4
  12 计算属性 和 Watch 监听器的区别.mp4
  13 方法和 Watch 监听器的区别.mp4
  14 表单输入数据处理.mp4
  15 双向绑定入门和 v-model.mp4
  16 其它表单控件事件处理.mp4
  17 表单提交事件处理.mp4
  18 在 inline-style 内联样式中绑定 data 数据.mp4
  19 根据条件添加或删除 class 样式.mp4
  20 本章小结.mp4
04 Vue 进阶用法
  01 本章简介.mp4
  02 v-html:在模板中输出原始的 HTML 代码.mp4
  03 v-once:只渲染1次 HTML 模板.mp4
  04 给 v-bind 和 v-on 设置动态参数.mp4
  05 再看 v-for 指令.mp4
  06 template 渲染一组标签但不额外增加嵌套.mp4
  07 事件传参与多事件处理函数.mp4
  08 事件相关的修饰符.mp4
  09 处理键盘、鼠标事件的修饰符.mp4
  10 表单输入相关的修饰符.mp4
  11 通过 Vue 实例访问和修改应用的配置.mp4
  12 生命周期:在合适的时机为应用添加数据和行为.mp4
  13 本章小结.mp4
05 Vue 核心:组件与脚手架
  01 本章简介.mp4
  02 什么是 Vue 组件.mp4
  03 如何创建组件.mp4
  04 全局注册组件.mp4
  05 局部注册组件.mp4
  06 脚手架:Vue 应用开发的利器.mp4
  07 安装 Node.js 运行环境.mp4
  08 使用 Vite 创建 Vue 项目.mp4
  09 创建和使用单一文件组件.mp4
  10 props 属性:自定义组件内容.mp4
  11 组件动态属性值绑定.mp4
  12 组件属性类型验证和默认值.mp4
  13 传递组件未定义的属性.mp4
  14 插槽:传递模板到子组件.mp4
  15 使用多个插槽占位.mp4
  16 子组件事件:向父组件传递数据的途径.mp4
  17 本章小结.mp4
06 Vue 组件深入
  01 本章简介.mp4
  02 响应性 props 和组件刷新.mp4
  03 使用 watch 监听属性 props 变化.mp4
  04 组件数据的流向设计.mp4
  05 组件的生命周期.mp4
  06 ProvideInject:给深层组件中传递属性.mp4
  07 在传递的 slot 模板中,访问子组件的属性.mp4
  08 给组件设置样式的方法,以及支持的 CSS 语法.mp4
  09 在 scoped 的 style 中修改子组件的样式.mp4
  10 在样式中绑定响应性数据.mp4
  11 让组件支持 v-model 指令.mp4
  12 使用多个 v-model 指令.mp4
  13 Refs:获取 DOM 和子组件实例.mp4
  14 自定义指令-增强的 HTML 功能.mp4
  15 使用动态组件渲染不同的 HTML 标签.mp4
  16 使用动态组件渲染不同的 Vue 组件.mp4
  17 解决动态组件数据丢失问题:KeepAlive.mp4
  18 组件传送:在其它 DOM 元素挂载组件.mp4
  19 组件传送:多次传送组件.mp4
  20 编程式的模板:渲染函数.mp4
  21 在渲染函数中使用”指令“.mp4
  22 Mixins:组件配置的复用.mp4
  23 Mixins 与组件共同属性的覆盖与合并原则.mp4
  24 全局注册 Mixins:适用于给 Vue 编写插件.mp4
  25 异步组件加载:按需加载组件代码,减少文件体积.mp4
  26 组件错误处理:全局错误处理.mp4
  27 组件错误处理:错误边界.mp4
  28 本章小结.mp4
07 Vue 组合 API
  01 本章简介.mp4
  02 为什么要用 Composition API.mp4
  03 setup() 函数:Composition API 的入口.mp4
  04 ref() 函数:在 setup() 函数中定义响应性数据.mp4
  05 reactive() 函数:另一种创建响应性对象的方式.mp4
  06 computed() 函数:定义计算属性.mp4
  07 watch():监听响应性数据的变化.mp4
  08 watch():监听对象中基本类型的响应性属性.mp4
  09 watch():监听对象类型的响应性属性.mp4
  10 watch():访问修改前的对象类型响应性数据.mp4
  11 watch():同时监听多个响应性数据.mp4
  12 watchEffect():变体的 watch().mp4
  13 watch() 和 watchEffect() 清理操作.mp4
  14 传递和访问 Props 属性.mp4
  15 转换非响应性 Props 为响应性.mp4
  16 refreactive 创建的数据在 Props 中的响应.mp4
  17 在 setup() 中定义 methods.mp4
  18 Emit 自定义事件.mp4
  19 生命周期钩子.mp4
  20 Provide 和 Inject.mp4
  21 使用 provide 和 inject 提供和访问响应性数据.mp4
  22 获取 template ref.mp4
  23 渲染函数:使用 context 中的 slots 属性.mp4
  24 获取非 props 属性 attrs.mp4
  25 最佳组件逻辑复用方式:Composables.mp4
  26 script setup 进一步简化组件.mp4
  27 本章小结.mp4
08 Vue 与后台交互 HTTP
  01 本章简介.mp4
  02 HTTP 简介.mp4
  03 使用 axios 加载远程数据.mp4
  04 Loading 加载状态展示.mp4
  05 传递 URL 查询参数.mp4
  06 使用 axios 发送数据到远程服务器.mp4
  07 请求 Header 设置.mp4
  08 处理请求错误.mp4
  09 配置代理:解决跨域问题.mp4
  10 取消请求.mp4
  11 封装 Axios.mp4
  12 修改为使用 Fetch 发送请求.mp4
  13 Fetch 处理请求错误.mp4
  14 Fetch 取消请求.mp4
  15 封装 Fetch.mp4
09 Vue 背后机制
  01 本章简介.mp4
  02 响应性基础:Proxy.mp4
  03 实现一个响应性的示例.mp4
  04 Virtual DOM:Vue 渲染机制的核心.mp4
  05 本章小结.mp4
10 Vue 动画与过渡
  01 本章简介.mp4
  02 使用 CSS keyframes 实现动画.mp4
  03 使用 CSS Transition 实现过渡.mp4
  04 使用纯 CSS 实现进场离场动画的问题.mp4
  05 Transition 组件:处理组件进场和离场动画.mp4
  06 处理 HTML 元素的切换动画.mp4
  07 处理 Vue 组件的切换动画.mp4
  08 处理列表项的进场离场动画.mp4
  09 与第三方动画库集成.mp4
  10 使用 JavaScript 实现动画.mp4
  11 本章小结.mp4
11 Vue 项目开发与部署
  01 本章简介.mp4
  02 调试:Vue 开发者工具简介.mp4
  03 Vue 项目的打包.mp4
  04 本章小结.mp4
12 Vue Router 4.x 路由管理
  01 本章简介.mp4
  02 为什么需要 Vue Router.mp4
  03 一个不用 Vue Router 的例子.mp4
  04 Vue Router 安装和入门.mp4
  05 嵌套路由:实现页面子组件切换.mp4
  06 动态路由匹配和参数获取.mp4
  07 一个问题:路由组件不刷新.mp4
  08 高级路由匹配语法和优先级.mp4
  09 获取 query 查询参数.mp4
  10 使用命名路由精确控制跳转.mp4
  11 路由别名:不同路径渲染同一组件.mp4
  12 重定向:把当前 URL 跳转到其它 URL.mp4
  13 编程式的控制导航.mp4
  14 命名视图:同一路由渲染多个组件.mp4
  15 在嵌套路由中使用命名视图.mp4
  16 给当前活跃导航设置高亮样式.mp4
  17 导航守卫简介.mp4
  18 全局导航守卫.mp4
  19 路由导航守卫.mp4
  20 组件导航守卫.mp4
  21 路由 meta 元数据.mp4
  22 页面滚动行为控制.mp4
  23 代码分割:路由组件的懒加载.mp4
  24 给组件传递 Props.mp4
  25 封装 router-link 组件.mp4
  26 处理导航错误.mp4
  27 动态的添加路由.mp4
  28 路由过渡动画.mp4
  29 Composition API.mp4
  30 本章小结.mp4
13 Vuex 4.x 全局状态管理
  01 本章简介.mp4
  02 为什么需要全局状态管理.mp4
  03 第一个 Vuex 示例.mp4
  04 定义和访问状态 state.mp4
  05 定义和触发 Mutations.mp4
  06 Getters:Vuex 中的计算属性.mp4
  07 Actions:定义异步业务逻辑.mp4
  08 在 Actions 中触发其它 Actions.mp4
  09 为什么 Mutations 必须是同步的.mp4
  10 表单处理注意事项.mp4
  11 模块化:隔离与减少文件体积.mp4
  12 模块命名空间.mp4
  13 vuex 应用文件结构.mp4
  14 配置日志插件参数.mp4
  15 与 vue devtools 集成.mp4
  16 Vuex 插件系统 - 实现一个状态持久化与还原插件.mp4
  17 Composition API.mp4
  18 本章小结.mp4
14 Pinia 全局状态管理
  01 本章简介.mp4
  02 Pinia 简介.mp4
  03 添加 Pinia 到项目中.mp4
  04 添加 HTML CSS 页面模板.mp4
  05 创建 store.mp4
  06 添加状态.mp4
  07 在组件中访问状态.mp4
  08 在组件中直接修改状态.mp4
  09 Getters computed 计算状态.mp4
  10 使用 $patch 同时修改多个状态.mp4
  11 使用 Actions 修改状态.mp4
  12 使用 Actions 异步的修改状态.mp4
  13 定义多个 store.mp4
  14 store 之间互相访问.mp4
  15 编写插件.mp4
  16 利用 Vue 开发者工具进行调试.mp4
  17 与 TypeScript 集成.mp4
  18 使用 Options API 形式创建 Store.mp4
  19 本章小结.mp4
15 综合示例
  01 项目简介.mp4
  02 Strapi 简介.mp4
  03 使用 Vite 创建项目.mp4
  04 添加图标、图片资源,编写 TheIcon 组件.mp4
  05 配置 Vue Router.mp4
  06 添加 NavBar 导航组件.mp4
  07 编写 HomePage 帖子列表.mp4
  08 抽离 TheAvatar 头像组件.mp4
  09 编写 HomePage 帖子详情弹窗.mp4
  10 抽离 PostActions.mp4
  11 抽离 TheModal 弹窗组件.mp4
  12 编写 HomePage 发布帖子弹窗.mp4
  13 抽离 TheLayout 组件.mp4
  14 抽离 PostList 和 PostItem 组件.mp4
  15 编写 SearchPage 搜索页.mp4
  16 编写 ProfilePage 个人资料页.mp4
  17 抽离 TheButton 按钮组件.mp4
  18 编写修改个人资料页.mp4
  19 编写注册、登录页.mp4
  20 添加 Footer 底部信息.mp4
  21 添加 Vuex.mp4
  22 封装 fetch.mp4
  23 配置 vite 代理.mp4
  24 用户注册功能实现.mp4
  25 用户登录功能实现.mp4
  26 登录页面自动跳转逻辑.mp4
  27 发布帖子 UI 逻辑.mp4
  28 发布帖子功能实现.mp4
  29 加载帖子列表功能实现.mp4
  30 点赞和收藏实现.mp4
  31 查看帖子详情功能实现.mp4
  32 发布评论功能实现.mp4
  33 加载评论列表功能实现.mp4
  34 修改个人资料功能实现.mp4
  35 个人资料页实现.mp4
  36 搜索帖子功能实现.mp4
  37 退出登录功能实现.mp4
  38 小结.mp4
16 TypeScript 入门教程
  01 本章简介.mp4
  02 为什么要使用 TypeScript.mp4
  03 安装并配置 TypeScript 开发环境.mp4
  04 定义类型.mp4
  05 给变量添加基本类型.mp4
  06 给对象变量添加类型.mp4
  07 使用 type关键字定义可复用的对象类型.mp4
  08 可选的对象类型属性.mp4
  09 使用 interface 定义对象类型.mp4
  10 interface 与 type 的区别.mp4
  11 定义嵌套的对象类型.mp4
  12 给数组变量添加类型.mp4
  13 设置多种类型.mp4
  14 类型别名与值限定.mp4
  15 给函数参数添加类型.mp4
  16 给函数返回值添加类型.mp4
  17 箭头函数的类型.mp4
  18 函数作为参数值、变量值或对象方法时的类型.mp4
  19 函数调用签名 Call signature.mp4
  20 any 类型.mp4
  21 类型强制转换.mp4
  22 为什么使用泛型.mp4
  23 给函数添加泛型.mp4
  24 给对象类型添加泛型.mp4
  25 定义多个泛型参数.mp4
  26 泛型约束.mp4
  27 interface 类型继承.mp4
  28 type 定义的类型继承.mp4
  29 tsconfig 文件简介.mp4
  30 本章小结.mp4
17 Vue 与 TypeScript 集成
  01 本章简介.mp4
  02 创建项目.mp4
  03 配置项目.mp4
  04 Ref 类型定义.mp4
  05 创建产品列表 UI.mp4
  06 定义 props 类型.mp4
  07 添加排序和过滤组件.mp4
  08 定义 emits 类型 & 原生 DOM 元素类型.mp4
  09 处理排序和筛选事件 & Reactive 类型定义.mp4
  10 computed 类型定义.mp4
  11 provideinject 类型定义.mp4
  12 template ref 类型定义.mp4
  13 组件 ref 类型定义.mp4
  14 本章小结.mp4
18 课程总结
  01 课程总结.mp4