001 课程简介

002 vue简介

003 Vue官网使用指南

---

004 搭建Vue开发环境

---

005 Hello小案例

---

006 分析Hello案例

初识Vue:

• 1.想让Vue工作，就必须创建个Vue实例， 且要传入 一个配置对象;
• 2.root容器里的代码依然符合html规范，只不过混入了一些特 殊的Vue语法:
• 3.root容器里的代码被称为[Vue模板] ;
• 4.Vue实例和容器是一一对 应的;
• 5.真实开发中只有一个Vue实例， 并且会配合着组件一起使用;
• 6.xxx中的xx要写js表达式，且xx 可以自动读取到data中的所有属性;
• 7.一且data中的数据发生改变，那么模板中用到该数据的地方也会自动更新:

---

007 模板语法

• 插值语法：多用于标签体中
• 指令语法：标签属性
  

---

008 数据绑定

---

009 el与data的两种写法

---

010 理解MVVM

---

011 Object.define

---

013 Vue中的数据代理

			1.Vue中的数据代理：
						通过vm对象来代理data对象中属性的操作（读/写）
			2.Vue中数据代理的好处：
						更加方便的操作data中的数据
			3.基本原理：
						通过Object.defineProperty()把data对象中所有属性添加到vm上。
						为每一个添加到vm上的属性，都指定一个getter/setter。
						在getter/setter内部去操作（读/写）data中对应的属性。

---

014 事件处理

事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

---

015 事件修饰符

Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

---

016 键盘事件

1.Vue中常用的按键别名：
						回车 => enter
						删除 => delete (捕获“删除”和“退格”键)
						退出 => esc
						空格 => space
						换行 => tab (特殊，必须配合keydown去使用)
						上 => up
						下 => down
						左 => left
						右 => right

			2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

			3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
						(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
						(2).配合keydown使用：正常触发事件。

			4.也可以使用keyCode去指定具体的按键（不推荐）

			5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

---

017 事件总结

---

018 姓名案例

---

019 计算属性

---

020 计算属性_简写

---

021 天气案例

---

022 监视属性

---

023 深度监视

---

024 监视的简写形式

---

025 watch对比computed

---

026 绑定class样式

---

027 绑定style样式

---

028 条件渲染

---

029 列表渲染

---

030 key作用与原理

---

031 列表过滤

---

032 列表排序

---

033 更新时的一个问题

---

034 Vue监测数据的原理_对象

---

035 Vue.set()方法

---

036 Vue监测数据的原理_数组

---

037 总结Vue监视数据

---

038 收集表单数据

---

039 过滤器

---

040 v-text指令

---

041 v-html指令

---

042 v-cloak指令

---

043 v-once指令

---

044 v-pre指令

---

045 自定义指令_函数式

---

046 自定义指令_对象式

---

047 自定义指令_总结

---

048 引出生命周期

---

049 生命周期_挂载流程

---

050 生命周期_更新流程

---

051 生命周期_销毁流程

---

052 生命周期_总结

---

053 对组件的理解

---

054 非单文件组件

---

055 组件的几个注意点

---

056 组件的嵌套

---

057 VueComponent构造函数

---

058 Vue实例与组件实例

---

059 一个重要的内置关系

---

060 单文件组件

---

061 创建Vue脚手架

---

062 分析脚手架结构

---

063 render函数

---

064 修改默认配置

---

065 ref属性

---

066 props配置

---

067 mixin混入

---

068 插件

---

069 scoped样式

---

070 TodoList案例_静态

---

071 TodoList案例_初始化列表

---

072 TodoList案例_添加

---

073 TodoList案例_勾选

---

074 TodoList案例_删除

---

075 TodoList案例_底部统计

---

076 TodoList案例_底部交互

---

077 TodoList案例_总结

---

078 浏览器本地存储

---

079 TodoList_本地存储

---

080 组件自定义事件_绑定

---

081 组件自定义事件_解绑

---

082 组件自定义事件_总结

---

083 TodoList案例_自定义事件

---

084 全局事件总线1

---

085 全局事件总线2

---

086 TodoList案例_事件总线

---

087 消息订阅与发布_pubsub

---

088 TodoList案例_pubsub

---

089 TodoList案例_编辑

---

090 $nextTick

---

091 动画效果

---

092 过度效果

---

093 多个元素过度

---

094 集成第三方动画

---

095 总结过度与动画

---

096 配置代理_方式一

---

097 配置代理_方式二

---

098 github案例_静态组件

---

099 github案例_列表展示

---

100 github案例_完善案例

---

101 vue-resource

---

102 默认插槽

---

103 具名插槽

---

104 作用域插槽

---

105 Vuex简介

---

106 求和案例_纯vue版

---

107 Vuex工作原理图

---

108 搭建Vuex环境

---

109 求和案例_vuex版

---

110 vuex开发者工具的使用

---

111 getters配置项

---

112 mapState与mapGetters

---

113 mapActions与mapMutations

---

114 多组件共享数据

---

115 vuex模块化+namespace_1

---

116 vuex模块化+namespace_2

---

117 路由的简介

---

118 路由基本使用

---

119 几个注意点

---

120 嵌套路由

---

121 路由的query参数

---

122 命名路由

---

123 路由的params参数

---

124 路由的props配置

---

125 router-link的replace属性

---

126 编程式路由导航

---

127 缓存路由组件

---

128 两个新的生命周期钩子

---

129 全局前置_路由守卫

---

130 全局后置_路由守卫

---

131 独享路由守卫

---

132 组件内路由守卫

---

133 history模式与hash模式

---

134 element-ui基本使用

---

135 element-ui按需引入

---

136 vue3简介

---

137 使用vue-cli创建工程

---

138 使用vite创建工程

---

139 分析工程结构

---

140 安装开发者工具

---

141 初识setup

---

142 ref函数_处理基本类型

---

143 ref函数_处理对象类型

---

144 reactive函数

---

145 回顾Vue2的响应式原理

---

146 Vue3响应式原理_

---

148 reactive对比ref

---

149 setup的两个注意点

---

150 computed计算属性

---

151 watch监视ref定义的数据

---

152 watch监视reactive定义的数据

---

153 watch时value的问题

---

154 watchEffect函数

---

155 Vue3生命周期

---

156 自定义hook

---

157 toRef与toRefs

---

158 shallowReactive与shallowRef

---

159 readonly与shallowReadonly

---

160 toRaw与markRaw

---

161 customRef

---

162 provide与inject

---

163 响应式数据的判断

---

164 CompositionA

---

166 Teleport组件

---

167 Suspense组件

---

168 Vue3中其他的改变

---