Vue3+Angular10+React+Ts+Antd前端必备入门实战教程

Vue3+Angular10+React+Ts+Antd前端必备入门实战教程课程介绍：

1、Angular+Antd视频教程更新于，兼容Angular12，Angular10、Angular9，Angular8、Angular7、Angular6、Angular5以及老版本的Angular2，Angular10.x相比React vue有更快的编译速度、更快的运行速度。

2、Vue3.x+Ts+Vuex+Antd教程完成录制于2021年1月，所有内容均为大地讲解，每一讲都是专业技术老师试听后发布，质量有保证。教程由浅入深，逐步深入，让你快速了解并掌握Vue3.x+ts+Vuex+Antd的使用。

3、React+React-router4.x+Antd+Flux教程录制于2018年更新于2019年，所有内容均为大地讲解，每一讲都是专业技术老师试听后发布，质量有保证。

 一、Vue3.x+Ts+Vuex+antd入门实战视频教程目录结构介绍

01、Vue3.x简介、搭建Vue3.x环境、创建运行Vue3.x项目、分析Vue3.x目录结构（17分41秒）

一、Vue3.x介绍

二、通过Vue-cli创建我们的项目

三、通过Vite脚手架创建我们的项目

四、Vue3.x 目录结构介绍

五、Vue3.x 开发工具以及插件配置

02、Vue3.x绑定数据、绑定html、绑定属性、循环数据（30分24秒）

一、Vue3.x定义数据绑定数据

二、v-html绑定html

三、v-bind绑定属性

四、v-bind动态参数

五、v-for循环数组

六、v-for循环对象

03、Vue3.x中的事件方法入门、模板语法模板中类和样式绑定（29分50秒）

一、Vue3.x中的事件方法入门

二、v-bind绑定Class

三、v-bind:style 绑定内联样式 

04、Vue3.x中的事件方法详解、事件监听、方法传值、事件对象、多事件处理程序、事件修饰符、按键修饰符（24分34秒）

一、监听事件

二、定义方法 执行方法  获取数据 改变数据

三、方法传值、方法的相互调用

四、事件对象

五、多事件处理程序

六、事件修饰符

七、按键修饰符

05、Vue3.x中Dom操作$refs 以及表单（ input、checkbox、radio、select、 textarea ）结合双休数据绑定实现在线预约功能（26分13秒）

一、监听事件

二、定义方法 执行方法  获取数据 改变数据

三、方法传值、方法的相互调用

四、事件对象

五、多事件处理程序

六、事件修饰符

七、按键修饰符

06、Vue3.x中使用JavaScript表达式 、条件判断、 计算属性和watch侦听（33分9秒）

一、Vue3.x模板中使用JavaScript表达式

二、 v-if  v-else  v-else-if  v-show

三、计算属性

四、计算属性实现数据的筛选

五、watch监听数据变化

07、Vue3.x 实现一个完整的toDoList（待办事项） 以及类似京东App搜索缓存数据功能【前面知识综合练习】(17分42秒)

一、Vue3.x中集成Sass/scsss

二、template标签的使用

三、Vue3.x 实现一个完整的toDoList（待办事项） 以及类似京东App搜索缓存数据功能

08、Vue3.x中的模块化以及封装Storage实现todolist 待办事项 已经完成的持久化（13分21秒）

一、Vue3.x中的模块化以及封装Storage

二、 Storage实现todolist 待办事项 已经完成的持久化

09、Vue3.x中的单文件组件 定义组件 注册组件 以及组件的使用（15分29秒）

10、Vue3.x父组件给子组件传值、Props、Props验证、单向数据流（26分12秒）

一、Vue3.x父子组件介绍

二、父组件给子组件传值

三、子组件通过Props接收父组件的数据

四、Props验证

五、单向数据流

11、Vue3.x父组件主动获取子组件的数据和执行子组件方法 、子组件主动获取父组件的数据和执行父组件方法（15分8秒）

一、Vue3.x父组件通过$refs主动获取子组件的数据和执行子组件方法

二、子组件主动$parent获取父组件的数据和执行父组件方法

12、Vue3.x组件自定义事件 以及mitt 实现非父子组件传值（24分48秒）

一、Vue3.x组件自定义事件

二、Vue3.x组件自定义事件实现子组件给父组件传值

三、Vue3.x组件自定义事件验证

四、vue3.x第三方插件mitt 实现非父子组件传值

13、Vue3.x自定义组件上面使用v-mode双休数据绑定 以及 slots以及 Prop 的Attribute 继承 、禁用 Attribute 继承（30分30秒）

一、自定义组件使用`v-model`实现双休数据绑定

二、自定义组件slots

三、Prop 的Attribute 继承 

四、禁用 Attribute 继承

14、Vue3.x中组件的生命周期函数（lifecycle）、 this.$nextTick、动态组件 keep-alive、Vue实现Tab切换（27分28秒）

一、Vue3.x中组件的生命周期函数

二、动态组件 keep-alive

三、this.$nextTick的使用

四、Vue实现Tab切换

15、Vue3.x中全局绑定属性、使用Axios和fetchJsonp请求真实api接口数据、函数防抖实现百度搜索（33分29秒）

一、Vue3.x中全局绑定属性

二、Vue3.x全局绑定Axios Storage

三、使用Axios和fetchJsonp请求真实api接口数据

四、调用百度真实api接口实现百度搜索、以及函数防抖

16、Vue3.x中的Mixin实现组件功能的复用 、全局配置Mixin（16分43秒）

一、Vue3.x中的Mixin

二、Mixin实现组件功能的复用

三、全局配置Mixin

17、Vue3.x Teleport、使用Teleport自定义一个模态对话框的组件（19分42秒）

一、Vue3.x Teleport

二、使用Teleport自定义一个模态对话框的组件

18、【Composition Api】Vue3.x Composition API setup ref reactive toRefs 详解（上）（23分8秒）

19、【Composition Api】Vue3.x Composition API setup ref reactive toRefs computed  watch watchEffect lifecycle详解（下）（35分19秒）

20、【Composition Api】Vue3.x Composition API  以及 Provider Inject(18分46秒)

21、【Vue3+Typescript】Vue3.x中集成Typescript 使用Typescript(上)（24分16秒）

22、【Vue3+Typescript】Vue3.x Composition API中使用Typescript(下)(22分2秒)

23、【Vue-Router】Vue3.x中的路由 路由配置（1）(15分37秒)

24、【Vue-Router】Vue3.x中的路由 vue动态路由 get传值  js跳转路由（18分30秒）

25、【Vue-Router】Vue3.x中的路由 路由模式、命名路由、路由重定向、路由别名（20分9秒）

26、【Vue-Router】Vue3.x中的路由 路由嵌套  父子路由（18分54秒）

27、【Vuex】Vuex 的使用 State、 Mutation 、mapState  实现多个页面共享状态（27分4秒）

28、【Vuex】Vuex 中的 State  Mutation Getters mapGetters Actions Modules(33分51秒)

29、【Vuex】Vuex 结合 Composition AP的使用(16分33秒)

30、【Vuex】Vuex Composition AP和非Composition AP中结合Typescript的使用(17分51秒)

31、【Vue+Antd】Vue3.x UI框架ant-design 组件库介绍 安装 使用（19分43秒）

32、【Vue+Antd】Vue3.x UI框架ant-design Layout布局 、路由配置、栅格系统实现Bootstrap官网首页布局（25分14秒）

33、【Vue+Antd】Vue3.x UI框架ant-design  input raido select checkbox  日期DatePicker的使用以及双向数据绑定获取表单数据(29分45秒)

34、【Vue+Antd】Vue3.x UI框架ant-design  Upload上传组件结合Nodejs后端实现图片上传（29分18秒）

Vue3.x+Ts+Vuex+antd入门实战视频教程目录截图：

二、Angular9 Angular10+Antd入门实战视频教程（大地）目录结构介绍： 

01 Angular介绍、安装Angular Cli、创建Angular项目  预编译器Scss Less css配置(14分52秒)

    一、 Angular介绍    

    二、 学习Angular必备基础

    三、 Angular环境搭建

    四、 Angular创建项目

    五、 Angular环境搭建以及创建项目的时候可能遇到的错误

    六、 Angular开发工具介绍

02 Angular目录结构分析、app.module.ts详解、以及Angular中创建组件、组件详解、 绑定数据（22分11秒）

    一、  Angular目录结构分析

    二、  app.module.ts、组件分析

    三、  Angular中创建组件

    四、  组件详解

    五、  绑定数据

03 Angular创建组件 声明属性的几种方式、ts定义属性、绑定数据、绑定属性、绑定html、数据循环、循环多维数组(34分9秒)

    一、  声明属性的几种方式private、protected、public

    二、  typescript基础语法

    三、  定义属性 绑定数据 绑定属性  绑定html

    四、  循环简单数组

    五、  循环多维数组

04 Angular 绑定数据、条件判断、加载图片、【ngClass】 【ngStyle】、Angular管道 、事件、表单事件、事件对象、双向数据绑定（45分）

    一、创建angualr组件    

    二、Angular绑定数据    定属性    

    三、数据循环  *ngFor    

    四、条件判断  *ngIf     

    五、 *ngSwitch    

    六、执行事件   (click)=”getData()”    

    七、表单事件    

    八、双向数据绑定    

    九、 [ngClass]、[ngStyle]    

    十、 管道    

    十一、Angular内置模块的使用

05 Angular中Dom操作 以及表单（ input、checkbox、radio、select、 textarea ）结合双休数据绑定实现在线预约功能（34分48秒）

    一、通过Angular Dom操作获取表单里面的数据

    二、双休数据绑定获取input、checkbox、radio、select、 textarea里面的数据

    三、checkbox可用于加入购物车数据筛选、radio可用于支付方式

06 Angular 实现一个完整的toDoList（待办事项） 以及类似京东App搜索缓存数据功能【前面知识综合练习】(34分57秒)

07 Angular中的服务 以及自定义服务 以及完善toDoList（待办事项案例）(27分6秒)

    一、Angular中的服务的用途

    二、Angular中定义使用服务

    三、定义一个缓存数据的服务缓存toDoList里面的内容

08 Angular中的Dom操作以及@ViewChild、Angular调用css3动画(侧边栏 actionSheet)（28分）

    一、Angular中通过原生JS获取Dom 生命周期函数介绍

    二、Angular 中通过 ViewChild获取DOM节点

    三、父组件通过ViewChild获取子组件的实例一个

    四、Angualr中调用CSS3动画实现侧边栏动画效果

09 Angular父子组件以及组件之间通讯

    一、 父组件给子组件传值-@input  子组件获取父组件的数据、执行子组件的方法 

    二、 父组件通过@ViewChild主动获取子组件的数据和方法    父组件获取子组件的数据、父组件执行子组件方法

    三、 非父子组件通讯     

    四、子组件通过@Output 结合事件驱动实现组件通讯

10 Angular中的生命周期函数--动态挂载销毁组件（22分2秒）

    一、constructor  （非生命周期函数）

    二、ngOnChanges()

    三、ngOnInit()

    四、ngDoCheck()

    五、ngAfterContentInit()

    六、ngAfterContentChecked()

    七、ngAfterViewInit()

    八、ngAfterViewChecked()

    九、ngOnDestroy()

11 Rxjs6.x异步数据流编程-Angular Rxjs快速入门教程(32分43秒)

    一、 Rxjs介绍    

    二、 Promise和RxJS 处理异步对比    

    三、 Rxjs  unsubscribe取消订阅    

    四、 Rxjs  订阅后多次执行    

    五、 Angualr6.x之前使用Rxjs的工具函数map filter    

    六、 Angualr6.x 以后 Rxjs6.x的变化以及使用    

    七、 Rxjs延迟执行

    八、 Rxjs把Dom事件转化成流

12 Angular中的数据请求 内置模块HttpClient实现（get post  jsonp  以及第三方模板axios请求数据（32分12秒）

    一、 Angular get 请求数据    

    二、 Angular post提交数据    

    三、 Angular Jsonp请求数据    

    四、 Angular中使用第三方模块axios请求数据    

    五、Angular内置模块HttpClientModule HttpClientJsonpModule 的使用

13 Angular中的路由 路由概述 配置路由 路由重定向 路由选中 默认路由（1）（20分3秒）

    一、Angular创建一个默认带路由的项目、路由模块分析

    二、Angular 配置路由、 默认路由

    三、Angular  routerLink跳转页面      

    四、Angular routerLinkActive设置routerLink默认选中路由    

14 Angular中路由传值（get传值、动态路由）以及通过js跳转路由（2）（26分53秒）

    一、Angular中get传值 以及获取get传值

    二、Angular 中动态路由 以及获取动态路由的值

    三、Angular 动态路由 js跳转路由

    四、Angular get传值 js跳转路由

15 Angular路由的嵌套 父子路由（3） (22分45秒)

    一、Angular路由的嵌套的用途

    二、Angular 中配置使用嵌套路由

16 Angular【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、 动态路由传值 、绑定html【基础项目】（36分24秒）

17 Angular 中内置模块 以及 自定义模块(24分58秒)   

    一、Angular内置模块

    二、Angular中自定义模块的介绍、和用途

    三、Angular中自定义模块

    四、Angualr中自定义模块的使用

18 Angular 自定义模块以及配置路由模块懒加载（25分50秒）

    一、Angular自定义模块实现组件的懒加载

    二、Angular自定义模块中的路由以及父子路由 

19【Ng-Zorro】 Angular UI框架Ng-Zorro 组件库介绍、安装、使用、注意事项 、按钮 、图标（19分20秒）

   一、 Angular10 UI库Ant Desigin介绍   

   二、 Angular10 UI库Ant Desigin安装配置

   三、 Angular10 UI库Ant Desigin组件的使用

20【Ng-Zorro】Angular UI框架Ng-Zorro Layout布局 、路由配置、栅格系统实现Bootstrap官网首页布局（27分16秒）

21【Ng-Zorro】Angular UI框架 Ng-Zorro开发工具插件配置、 input raido select checkbox  日期DatePicker的使用以及双向数据绑定获取表单数据（25分33秒））

   一、 Input输入框   

   二、 Radio 单选框   

   三、 Checkbox复选框   

   四、 DatePicker日期   

   五、 Select 选择器   

22【Ng-Zorro】Angular UI框架 Ng-Zooro Upload上传组件结合Nodejs后端实现图片上传(24分43秒)

最新Angular9、Angular10入门实战视频教程（大地）资料截图展示：

三、8小时学会 React + React-router4.x+Ant Design+Flux入门实战视频教程目录结构介绍：

01 React的介绍、yarn npx、用React脚手架create-react-app搭建React环境  运行React项目（22分13秒）

1、大前端技术体系以及薪资介绍

2、React的介绍

3、搭建React开发环境之前的准备工作。

4、搭建React开发环境的两种方法

5、npx介绍

02 React目录结构分析 、创建组件、 JSX语法、 绑定数据 绑定对象（25分5秒）

1、React目录结构  

2、React创建组件

3、React JSX语法

4、React绑定数据

5、React绑定对象

03 React 创建组件、绑定属性( 绑定class  绑定style)、引入图片  循环数组渲染数据（32分29秒）

1、React 创建组件

2、React绑定属性

3、React ( 绑定class  绑定style)

4、React引入图片的三种方式

5、React循环数组渲染数据的几种方式

04 React事件 方法、 React定义方法的几种方式 获取数据 改变数据 执行方法传值（13分33秒）

1、React 事件 

2、React 定义方法

3、React 方法改变this指向的三种方式

4、React 获取表单数据、setState改变数据

5、React 执行方法传值

05 React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定（35分8秒）

1、React 键盘事件 

2、React 表单事件

3、React 事件对象

4、React ref获取dom节点

5、React 类似Vue的双向数据绑定

06 React表单详解 约束性和非约束性组件 input text checkbox radio  select  textarea  以及获取表单的内容(36分33秒)

1、React 监听from提交事件以及阻止默认行为

2、React 表单 text  

3、React 表单radio  

4、React 表单checkbox  

5、React 表单select   

6、React 表单textarea

07 React实现Todolist练习（上）（15分21秒）

1、React 实现获取表单数据

2、React增加数据

3、React 删除数据

08 React实现Todolist练习 Todolist 待办事项 已经完成事项（中）（22分8秒）

1、React checkbox综合练习

2、React Todolist 待办事项

3、React Todolist 已完成事项

09 React的模块化以及封装Storage实现todolist 待办事项 已经完成事项 以及实现数据持久化（下）（13分10秒）

1、React 中自定义模块

2、自定义Storage模块

3、React 代办事项已完成事项数据持久化

10 React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法(34分3秒)

1、React 组件介绍

2、父子组件

3、父组件给子组件传值

4、父组件给子组件传方法

5、把整个父组件传给子组件 

6、子组件给父组件传值

7、父组件通过refs主动执行子组件的方法

8、父组件通过refs主动获取子组件数据

11 React  propTypes  defaultProps （11分15秒）

1、React 父子组件传值 propTypes  

2、React  父子组件传值 defaultProps 

12 React 获取服务器数据 axios插件 fetch-jsonp插件的使用（26分15秒）

1、React 获取服务器数据axios

2、React  获取服务器数据fetch-jsonp

13 React 生命周期函数（26分48秒）

1、React 生命周期函数介绍

2、constructor 、componentWillMount、 render 、componentDidMount

3、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate

4、你在父组件里面改变props传值的时候触发componentWillReceiveProps

5、组件销毁的时候触发的componentWillUnmount

14 React路由 react-router4.x的基本配置（19分54秒）

1、react-router4.x 路由介绍

2、react-router4.x的基本配置

15 React路由 react-router4.x 动态路由以及get传值 React中使用url模块（25分40秒）

1、react-router4.x 动态路由

2、react-router4.x get传值

3、React中使用url模块解析get传值

16 React【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、 动态路由传值【基础项目】（31分8秒）

1、react-router4.x 路由配置

2、react-router4.x 请求菜品和菜品分类数据

3、react-router4.x 循环渲染二维数组

4、react-router4.x跳转到菜品详情传值

17 React【无人点餐无人收银系统案例】菜品详情请求api渲染数据 以及解析Html【基础项目】（16分11秒）

1、react-router4.x 请求菜品详情api 渲染数据

2、react-router4.x 请求菜品详情解析html

18 React 渲染数据注意事项、以及react-router4.x中使用js跳转路由（24分41秒）

1、react-router4.x 渲染数据注意事项

2、react-router4.x 使用js跳转路由

19 React  react-router4.x路由的嵌套（20分54秒）

1、react-router4.x 路由嵌套 父子路由

20 React react-router4.x中实现路由模块化、以及嵌套路由父子组件传值（29分4秒）

1、react-router4.x 路由模块化

2、react-router4.x嵌套路由模块化

3、react-router4.x嵌套路由模块化 以及父子路由传值

21 React UI框架Antd(Ant Design)的使用 以及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件（21分14秒）

1、React Ui框架 Ant Design介绍

2、React Ui框架 Ant Design的使用

3、按钮组件、icon组件、日期组件的使用

4、antd布局组件结合路由实现后台管理界面

22、React UI框架 Antd (Ant Design)配置react-app-rewired按需加载Antd的css(11分54秒)