课程简介

Vue简介

Vue官网使用指南

搭建Vue开发环境

Hello小案例

分析Hello案例

模板语法

数据绑定

el与data的两种写法

理解MVVM

Object.defineProperty

理解数据代理

Vue中的数据代理

事件处理

事件修饰符

键盘事件

事件总结

姓名案例

计算属性

计算属性_简写

天气案例

监视属性

深度监视

监视的简写形式

watch对比computed

绑定class样式

绑定style样式

条件渲染

列表渲染

key作用与原理

列表过滤

列表排序

更新时的一个问题

Vue监测数据的原理_对象

Vue.set()方法

Vue监测数据的原理_数组

总结Vue监视数据

收集表单数据

过滤器

v-text指令

v-html指令

v-cloak指令

v-once指令

v-pre指令

自定义指令_函数式

自定义指令_对象式

自定义指令_总结

引出生命周期

生命周期_挂载流程

生命周期_更新流程

生命周期_销毁流程

生命周期_总结

对组件的理解

非单文件组件

组件的几个注意点

组件的嵌套

VueComponent构造函数

Vue实例与组件实例

一个重要的内置关系

单文件组件

创建Vue脚手架

分析脚手架结构

render函数

修改默认配置

ref属性

props配置

mixin混入

插件

scoped样式

TodoList案例_静态

TodoList案例_初始化列表

TodoList案例_添加

TodoList案例_勾选

TodoList案例_删除

TodoList案例_底部统计

TodoList案例_底部交互

TodoList案例_总结

浏览器本地存储

TodoList_本地存储

组件自定义事件_绑定

组件自定义事件_解绑

组件自定义事件_总结

TodoList案例_自定义事件

全局事件总线1

全局事件总线2

TodoList案例_事件总线

消息订阅与发布_pubsub

TodoList案例_pubsub

TodoList案例_编辑

$nextTick

动画效果

过度效果

多个元素过度

集成第三方动画

总结过度与动画

配置代理_方式一

配置代理_方式二

github案例_静态组件

github案例_列表展示

github案例_完善案例

vue-resource

默认插槽

具名插槽

作用域插槽

Vuex简介

求和案例_纯vue版

Vuex工作原理图

搭建Vuex环境

求和案例_vuex版

vuex开发者工具的使用

getters配置项

mapState与mapGetters

mapActions与mapMutations

多组件共享数据

vuex模块化+namespace_1

vuex模块化+namespace_2

路由的简介

路由基本使用

几个注意点

嵌套路由

路由的query参数

命名路由

路由的params参数

路由的props配置

router-link的replace属性

编程式路由导航

缓存路由组件

两个新的生命周期钩子

全局前置_路由守卫

全局后置_路由守卫

独享路由守卫

组件内路由守卫

history模式与hash模式

element-ui基本使用

element-ui按需引入

vue3简介

使用vue-cli创建工程

使用vite创建工程

分析工程结构

安装开发者工具

初识setup

ref函数_处理基本类型

ref函数_处理对象类型

reactive函数

回顾Vue2的响应式原理

Vue3响应式原理_Proxy

Vue3响应式原理_Reflect

reactive对比ref

setup的两个注意点

computed计算属性

watch监视ref定义的数据

watch监视reactive定义的数据

watch时value的问题

watchEffect函数

Vue3生命周期

自定义hook

toRef与toRefs

shallowReactive与shallowRef

readonly与shallowReadonly

toRaw与markRaw

customRef

provide与inject

响应式数据的判断

CompositionAPI的优势

Fragment组件

Teleport组件

Suspense组件

Vue3中其他的改变