Vue.js 3.x高效前端开发(视频教学版)

第1章 认识Vue.js 3.x 1

1.1 Web前端技术的发展历程 1

1.1.1 从静态向动态转变 1

1.1.2 从后端走向前端 2

1.1.3 从前端走向全端 2

1.2 Vue.js概述 2

1.2.1 Vue.js是什么 2

1.2.2 Vue.js发展历程 4

1.3 MV*模式 4

1.3.1 MVC模式 4

1.3.2 MVVM模式 5

第2章 创建Vue.js实例 6

2.1 安装vue-devtools 6

2.2 在项目中引入Vue.js 8

2.2.1 使用CDN 9

2.2.2 使用NPM 9

2.2.3 使用命令行工具CLI 9

2.2.4 使用Vite 10

2.3 安装和使用编辑器HBuilder 10

2.4 项目实训—我的**个Vue.js程序 12

第3章 Vue.js模板语法 16

3.1 创建应用程序实例 16

3.2 插值 17

3.3 方法选项 19

3.3.1 使用方法 19

3.3.2 传递参数 21

3.3.3 方法之间的调用 22

3.4 Vue实例的生命周期 23

3.4.1 认识生命周期钩子函数 23

3.4.2 created和mouted 25

3.5 指令 27

第4章 精通指令 29

4.1 常见内置指令 29

4.1.1 v-show指令 29

4.1.2 v-bind指令 30

4.1.3 v-model 31

4.1.4 v-on 33

4.1.5 v-text 34

4.1.6 v-html 35

4.1.7 v-once 36

4.1.8 v-pre 37

4.1.9 v-cloak 38

4.2 条件渲染指令 39

4.2.1 v-if 39

4.2.2 v-else-if和v-else 40

4.2.3 v-for 41

4.3 指令缩写 53

4.4 自定义指令 53

4.4.1 注册自定义指令 53

4.4.2 钩子函数 54

4.4.3 动态指令参数 56

4.5 项目实训—通过指令实现随机背景色效果 57

第5章 计算属性 59

5.1 计算属性的定义 59

5.2 计算属性的getter和setter方法 60

5.3 计算属性的缓存 62

5.4 计算属性代替v-for和v-if 65

5.5 项目实训—使用计算属性设计计算器 66

第6章 v-bind及class与style绑定 68

6.1 绑定HTML样式class 68

6.1.1 数组语法 68

6.1.2 对象语法 70

6.1.3 用在组件上 74

6.2 绑定内联样式style 74

6.2.1 对象语法 74

6.2.2 数组语法 77

6.3 项目实训—设计隔行变色的水果信息表 78

第7章 表单与v-model双向绑定 81

7.1 实现双向数据绑定 81

7.2 单行文本输入框 81

7.3 多行文本输入框 82

7.4 复选框 83

7.5 单选按钮 85

7.6 选择框 86

7.7 值绑定 89

7.7.1 复选框 89

7.7.2 单选框 89

7.7.3 选择框的选项 90

7.8 修饰符 91

7.8.1 lazy 91

7.8.2 number 92

7.8.3 trim 93

7.9 项目实训—设计用户注册页面 94

第8章 精通监听器 96

8.1 使用监听器 96

8.2 监听方法和对象 97

8.2.1 监听方法 97

8.2.2 监听对象 98

8.3 实例方法$watch 101

8.4 项目实训—使用监听器设计购物车效果 102

第9章 事件处理 107

9.1 监听事件 107

9.2 事件处理方法 108

9.3 事件修饰符 111

9.3.1 stop 112

9.3.2 capture 114

9.3.3 self 115

9.3.4 once 117

9.3.5 prevent 118

9.3.6 passive 119

9.4 按键修饰符 119

9.5 系统修饰键 121

9.6 项目实训—处理用户注册信息 122

第10章 过渡和动画效果 125

10.1 单元素/组件的过渡和动画 125

10.1.1 CSS过渡 125

10.1.2 过渡的类名 127

10.1.3 CSS动画 129

10.1.4 自定义过渡的类名 130

10.1.5 动画的JavaScript钩子函数 131

10.2 初始渲染的过渡 135

10.3 多个元素的过渡 136

10.4 列表过渡 137

10.4.1 列表的进入/离开过渡 138

10.4.2 列表的排序过渡 139

10.4.3 列表的交错过渡 140

10.5 项目实训—设计折叠菜单的过渡动画 142

第11章 组件和组合API 145

11.1 组件是什么 145

11.2 组件的注册 146

11.2.1 全局注册 146

11.2.2 局部注册 147

11.3 使用prop向子组件传递数据 147

11.3.1 prop基本用法 148

11.3.2 单向数据流 151

11.3.3 prop验证 151

11.3.4 非prop的属性 153

11.4 子组件向父组件传递数据 154

11.4.1 监听子组件事件 155

11.4.2 将原生事件绑定到组件 156

11.4.3 .sync修饰符 158

11.5 插槽 160

11.5.1 插槽基本用法 160

11.5.2 编译作用域 160

11.5.3 默认内容 161

11.5.4 命名插槽 162

11.5.5 作用域插槽 165

11.5.6 解构插槽prop 166

11.6 什么是组合API 168

11.7 setup()函数 168

11.8 响应式API 169

11.8.1 reactive()方法和watchEffect()方法 169

11.8.2 ref()方法 170

11.8.3 readonly()方法 171

11.8.4 computed()方法 172

11.8.5 watch()方法 172

11.9 项目实训—使用组件创建树状项目分类 173

第12章 虚拟DOM和render()函数 176

12.1 虚拟DOM 176

12.2 render()函数 177

12.3 创建组件的VNode 180

12.4 使用JavaScript代替模板功能 181

12.4.1 v-if和v-for 181

12.4.2 v-on 182

12.4.3 事件和按键修饰符 182

12.4.4 插槽 183

12.5 函数式组件 185

12.6 JSX 185

12.7 项目实训—设计商品采购信息列表 186

第13章 精通Vue CLI和Vite 189

13.1 脚手架的组件 189

13.2 脚手架环境搭建 190

13.3 安装脚手架 191

13.4 创建项目 192

13.4.1 使用命令 192

13.4.2 使用图形化界面 195

13.5 分析项目结构 196

13.6 配置scss、less和stuly 198

13.7 配置文件gackage.json 201

13.8 Vue.js 3.x新增的开发构建工具Vite 202

第14章 使用Vue Router开发单页面应用 205

14.1 使用Vue Router 205

14.1.1 在HTML页面使用路由 205

14.1.2 在项目中使用路由 210

14.2 命名路由 211

14.3 命名视图 213

14.4 路由传参 217

14.5 编程式导航 222

14.6 组件与Vue Router之间解耦 226

14.6.1 布尔模式 226

14.6.2 对象模式 229

14.6.3 函数模式 232

第15章 使用axios与服务器通信 235

15.1 什么是axios 235

15.2 安装axios 236

15.3 基本用法 236

15.3.1 get请求和post请求 236

15.3.2 请求JSON数据 238

15.3.3 跨域请求数据 239

15.3.4 并发请求 241

15.4 axios API 243

15.5 请求配置 244

15.6 创建实例 246

15.7 配置默认选项 246

15.8 拦截器 247

15.9 项目实训—显示近7日的天气情况 248

第16章 使用Vuex管理组件状态 250

16.1 什么是Vuex 250

16.2 安装Vuex 251

16.3 在项目中使用Vuex 252

16.3.1 搭建一个项目 252

16.3.2 state对象 254

16.3.3 getter对象 255

16.3.4 mutation对象 257

16.3.5 action对象 259

第17章 开发网上商城项目 262

17.1 系统功能模块 262

17.2 系统结构分析 263

17.3 系统运行效果 263

17.4 系统功能模块设计与实现 264

17.4.1 首页头部组件 264

17.4.2 首页信息模块 265

17.4.3 用户注册与登录模块 268

17.4.4 商品模块 270

17.4.5 购买模块 276

17.4.6 支付模块 277

后记 279