源码下载

全集试看

本章简介-快速入门

全集试看

传统的网页开发方式的弊端

全集试看

Vue.js 是什么？解决了哪些问题？

全集试看

引入 Vue 3.x 框架的方式

全集试看

开发环境配置

创建第一个 Vue 3.x 应用

本章小结-快速入门

Vue基础入门-本章简介

创建并初始化 Vue 项目

使用 data 提供数据

在 HTML 属性中绑定 data 中的数据

展示列表内容

根据条件展示页面内容

事件与响应性入门

使用 computed 计算属性处理稍复杂的业务逻辑

使用 methods 方法处理事件

使用 watch 监听数据的变化

计算属性和方法的区别

计算属性 和 Watch 监听器的区别

方法和 Watch 监听器的区别

表单输入数据处理

双向绑定入门和 v-model

其它表单控件事件处理

表单提交事件处理

在 inline-style 内联样式中绑定 data 数据

根据条件添加或删除 class 样式

Vue 基础入门 - 本章小结

Vue 进阶用法-本章简介

v-html：在模板中输出原始的 HTML 代码

v-once：只渲染1次 HTML 模板

给 v-bind 和 v-on 设置动态参数

再看 v-for 指令

template 渲染一组标签但不额外增加嵌套

事件传参与多事件处理函数

事件相关的修饰符

处理键盘、鼠标事件的修饰符

表单输入相关的修饰符

通过 Vue 实例访问和修改应用的配置

生命周期：在合适的时机为应用添加数据和行为

Vue 进阶用法-本章小结

本章简介-Vue 核心：组件与脚手架

什么是 Vue 组件？

如何创建组件？

全局注册组件

局部注册组件

脚手架：Vue 应用开发的利器

安装 Node.js 运行环境

使用 Vite 创建 Vue 项目

创建和使用单一文件组件

props 属性：自定义组件内容

组件动态属性值绑定

组件属性类型验证和默认值

传递组件未定义的属性

插槽：传递模板到子组件

使用多个插槽占位

子组件事件：向父组件传递数据的途径

本章小结-Vue 核心

本章简介-Vue 组件深入

响应性 props 和组件刷新

使用 watch 监听属性 props 变化

组件数据的流向设计

组件的生命周期

Provide/Inject：给深层组件中传递属性

在传递的 slot 模板中，访问子组件的属性

给组件设置样式的方法，以及支持的 CSS 语法

在 scoped 的 style 中修改子组件的样式

在样式中绑定响应性数据

让组件支持 v-model 指令

使用多个 v-model 指令

Refs：获取 DOM 和子组件实例

自定义指令-增强的 HTML 功能

使用动态组件渲染不同的 HTML 标签

使用动态组件渲染不同的 Vue 组件

解决动态组件数据丢失问题：KeepAlive

组件传送：在其它 DOM 元素挂载组件

组件传送：多次传送组件

编程式的模板：渲染函数

在渲染函数中使用”指令“

Mixins：组件配置的复用

Mixins 与组件共同属性的覆盖与合并原则

全局注册 Mixins：适用于给 Vue 编写插件

异步组件加载：按需加载组件代码，减少文件体积

组件错误处理：全局错误处理

组件错误处理：错误边界

本章小结-Vue 组件深入

本章简介-Vue 组合 API

为什么要用 Composition API

setup() 函数：Composition API 的入口

ref() 函数：在 setup() 函数中定义响应性数据

reactive() 函数：另一种创建响应性对象的方式

computed() 函数：定义计算属性

watch()：监听响应性数据的变化

watch()：监听对象中基本类型的响应性属性

watch()：监听对象类型的响应性属性

watch()：访问修改前的对象类型响应性数据

watch()：同时监听多个响应性数据

watchEffect()：变体的 watch()

watch() 和 watchEffect() 清理操作

传递和访问 Props 属性

转换非响应性 Props 为响应性

ref/reactive 创建的数据在 Props 中的响应性

在 setup() 中定义 methods

Emit 自定义事件

生命周期钩子

Provide 和 Inject

使用 provide 和 inject 提供和访问响应性数据

获取 template ref

渲染函数：使用 context 中的 slots 属性

获取非 props 属性 attrs

最佳组件逻辑复用方式：Composables

script setup: 进一步简化组件代码

3.5+: defineProps 支持解构赋值并保留响应性

defineModel 简化定义 v-m

defineModel 和多个 v-mo

defineModel 限定符

本章小结-Vue 组合 API

本章简介-Vue 与后台交互 HTTP

HTTP 简介

使用 axios 加载远程数据

Loading 加载状态展示

传递 URL 查询参数

使用 axios 发送数据到远程服务器

请求 Header 设置

处理请求错误

配置代理：解决跨域问题

取消请求

封装 Axios

修改为使用 Fetch 发送请求

Fetch 处理请求错误

Fetch 取消请求

封装 Fetch

本章简介-Vue 背后机制

响应性基础：Proxy

实现一个响应性的示例

Virtual DOM：Vue 渲染机制的核心

本章总结-Vue 背后机制

本章简介-Vue 动画与过渡

使用 CSS keyframes 实现动画

使用 CSS Transition 实现过渡

使用纯 CSS 实现进场/离场动画的问题

Transition 组件：处理组件进场和离场动画

处理 HTML 元素的切换动画

处理 Vue 组件的切换动画

处理列表项的进场/离场动画

与第三方动画库集成

使用 JavaScript 实现动画

本章小结-Vue 动画与过渡

本章简介-Vue 项目开发与部署

调试：Vue 开发者工具简介

Vue 项目的打包

本章小结-Vue 项目开发与部署

本章简介-Vue Router 4.x 路由管理

为什么需要 Vue Router？

一个不用 Vue Router 的例子

Vue Router 安装和入门

嵌套路由：实现页面子组件切换

动态路由匹配和参数获取

一个问题：路由组件不刷新

高级路由匹配语法和优先级

获取 query 查询参数

使用命名路由精确控制跳转

路由别名：不同路径渲染同一组件

重定向：把当前 URL 跳转到其它 URL

编程式的控制导航

命名视图：同一路由渲染多个组件

在嵌套路由中使用命名视图

给当前活跃导航设置高亮样式

导航守卫简介

全局导航守卫

路由导航守卫

组件导航守卫

路由 meta 元数据

页面滚动行为控制

代码分割：路由组件的懒加载

给组件传递 Props

封装 router-link 组件

处理导航错误

动态的添加路由

路由过渡动画

Composition API

本章小结-Vue Router 4.x 路由管理

本章简介-Vuex 4.x 全局状态管理

为什么需要全局状态管理

第一个 Vuex 示例

定义和访问状态 state

定义和触发 Mutations

Getters：Vuex 中的计算属性

Actions：定义异步业务逻辑

在 Actions 中触发其它 Actions

为什么 Mutations 必须是同步的？

表单处理注意事项

模块化：隔离与减少文件体积

模块命名空间

vuex 应用文件结构

配置日志插件参数

与 vue devtools 集成

Vuex 插件系统 - 实现一个状态持久化与还原插件

Composition API - Vuex

本章小结-Vuex 4.x 全局状态管理

本章简介-Pinia 全局状态管理

Pinia 简介

添加 Pinia 到项目中

添加 HTML / CSS 页面模板

创建 store

添加状态

在组件中访问状态

在组件中直接修改状态

Getters / computed 计算状态

使用 $patch 同时修改多个状态

使用 Actions 修改状态

使用 Actions 异步的修改状态

定义多个 store

store 之间互相访问

编写插件

利用 Vue 开发者工具进行调试

与 TypeScript 集成

使用 Options API 形式创建 Store

本章小结-Pinia 全局状态管理

必读-项目问题

项目简介-综合示例

Strapi 简介

使用 Vite 创建项目

添加图标、图片资源，编写 TheIcon 组件

配置 Vue Router

添加 NavBar 导航组件

编写 HomePage 帖子列表

抽离 TheAvatar 头像组件

编写 HomePage 帖子详情弹窗

抽离 PostActions

抽离 TheModal 弹窗组件

编写 HomePage 发布帖子弹窗

抽离 TheLayout 组件

抽离 PostList 和 PostItem 组件

编写 SearchPage 搜索页

编写 ProfilePage 个人资料页

抽离 TheButton 按钮组件

编写修改个人资料页

编写注册、登录页

添加 Footer 底部信息

添加 Vuex

封装 fetch

配置 vite 代理

用户注册功能实现

用户登录功能实现

登录页面自动跳转逻辑

发布帖子 UI 逻辑

发布帖子功能实现

加载帖子列表功能实现

点赞和收藏实现

查看帖子详情功能实现

发布评论功能实现

加载评论列表功能实现

修改个人资料功能实现

个人资料页实现

搜索帖子功能实现

退出登录功能实现

项目小结

本章简介-TypeScript 入门教程

为什么要使用 TypeScript

安装并配置 TypeScript 开发环境

定义类型

给变量添加基本类型

给对象变量添加类型

使用 type关键字定义可复用的对象类型

可选的对象类型属性

使用 interface 定义对象类型

interface 与 type 的区别

定义嵌套的对象类型

给数组变量添加类型

设置多种类型

类型别名与值限定

给函数参数添加类型

给函数返回值添加类型

箭头函数的类型

函数作为参数值、变量值或对象方法时的类型

函数调用签名 Call signature

any 类型

类型强制转换

为什么使用泛型

给函数添加泛型

给对象类型添加泛型

定义多个泛型参数

泛型约束

interface 类型继承

type 定义的类型继承

tsconfig 文件简介

本章小结-TypeScript 入门教程

本章简介-Vue 与 TypeScript 集成

创建项目

配置项目

Ref 类型定义

创建产品列表 UI

定义 props 类型

添加排序和过滤组件

定义 emits 类型 & 原生 DOM 元素类型

处理排序和筛选事件 & Reactive 类型定义

computed 类型定义

provide/inject 类型定义

template ref 类型定义

组件 ref 类型定义

本章小结-Vue 与 TypeScript 集成

课程总结