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






